import { DropDownItems } from '../../types/types';

export default function DropDown({
  id,
  items,
  selected,
  onChange,
}: {
  id: string;
  items: DropDownItems;
  selected: string;
  onChange: (item: any) => void;
}) {
  function _onChange(e: any) {
    if (items[e.target.value - 1]) {
      onChange(items[e.target.value - 1]);
    }
  }
  return (
    <div className="dropdown">
      <select
        id={id}
        value={items.find((item) => item.label === selected)?.value}
        onChange={_onChange}
      >
        {items.map((item) => (
          <option key={item.value} value={item.value} disabled={item.disabled}>
            {item.label}
          </option>
        ))}
      </select>
    </div>
  );
}