import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.css";
import { ELocalesPlacement } from "@/locales";

interface IPlacePickerProps {
  name: string;
  value: string;
  maxLength: number;
  isDisabled?: boolean;
  classNameInput?: string;
  onChange: (value: string) => void;
}

function PlacePicker({
  name,
  value,
  maxLength,
  isDisabled = false,
  classNameInput = "",
  onChange,
}: IPlacePickerProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const place = e.target.value;
    onChange(place);
  };

  return (
    <div className={styles.container}>
      <input
        className={`${styles["full-address"]} ${classNameInput}`}
        name={name}
        type="text"
        placeholder={
          translate("/questionnaire/profile/birthPlace.placeholder") as string
        }
        disabled={isDisabled}
        maxLength={maxLength}
        value={value}
        autoComplete="home city"
        onChange={handleChange}
      />
    </div>
  );
}

export default PlacePicker;
