import { useAppState } from "../lib/context/StateContext";
import { Quality, type EquipedItem } from "../lib/types";

export type Props = {
  item: EquipedItem;
};

export const QualitySelector = ({ item }: Props) => {
  const { dispatch } = useAppState();

  const handleOnChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    dispatch({
      action: "changeQuality",
      itemId: item.id,
      quality: event.target.value as Quality,
    });
  };
  return (
    <select onChange={handleOnChange}>
      {Object.values(Quality).map((quality) => (
        <option value={quality} selected={item.quality === quality}>
          {quality.charAt(0).toUpperCase() + quality.slice(1)}
        </option>
      ))}
    </select>
  );
};