interface SizeSelectorProps {
  sizes: string[] | undefined;
  selectedSize: string | null;
  setSelectedSize: (size: string) => void;
}

export const SizeSelector = ({
  sizes,
  selectedSize,
  setSelectedSize,
}: SizeSelectorProps) => (
  <div className="flex flex-col gap-4 mt-10 px-4">
    <p className="text-B18 font-bold">انتخاب سایز</p>
    <div className="gap-4 flex">
      {sizes?.map((size: string, index: number) => (
        <div
          key={index}
          className={`w-10 h-10 rounded-md flex border border-BLACK border-inner-border items-center justify-center ${
            selectedSize === size
              ? "bg-BLACK text-WHITE"
              : "bg-WHITE text-BLACK"
          }`}
          onClick={() => setSelectedSize(size)}
          onKeyDown={() => {}}
          role="button"
          tabIndex={0}
        >
          <p className="text-R12">{size}</p>
        </div>
      ))}
    </div>
  </div>
);