import { FC, useState } from 'react';
import classes from './styles.module.scss';

type SelectorProps = {
  field: string;
  handleSetValue: (field: string, value: string) => void;
  list: string[];
};

const Selector: FC<SelectorProps> = ({ field, handleSetValue, list }) => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const value = e.target.value;
    setInputValue(value);
    handleSetValue(field, value);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setInputValue(value);
    handleSetValue(field, value);
  };

  return (
    <div className={classes.selectorContainer}>
      <select
        className={classes.selector}
        onChange={handleChange}
        value={inputValue}
      >
        <option value="" disabled>
          Select an option
        </option>
        {list.map((item, index) => (
          <option key={index} value={item}>
            {item}
          </option>
        ))}
      </select>
      <input
        type="text"
        className={classes.input}
        value={inputValue}
        onChange={handleInputChange}
        placeholder="Or type your own"
      />
    </div>
  );
};

export default Selector;