interface ColorSelectorProps {
  colors: string[] | undefined;
  selectedColor: string | null;
  setSelectedColor: (color: string) => void;
}

export const ColorSelector = ({
  colors,
  selectedColor,
  setSelectedColor,
}: ColorSelectorProps) => {
  return (
    <div className="flex flex-col gap-4 mt-10 px-4 lg:px-0">
      <p className="text-B18 font-bold">انتخاب رنگ</p>
      <div className="gap-4 flex">
        {colors?.map((enColor: string, index: number) => {
          const isSelected = selectedColor === enColor;
          return (
            <button
              key={index}
              type="button"
              aria-label={`رنگ ${index + 1}`}
              aria-pressed={isSelected}
              className={`w-9 h-9 rounded-full border-2 border-WHITE transition-shadow ring-offset-2 ring-offset-WHITE ${
                isSelected ? "ring-2 ring-BLACK" : "ring-1 ring-WHITE3"
              }`}
              style={{ backgroundColor: enColor }}
              onClick={() => setSelectedColor(enColor)}
            />
          );
        })}
      </div>
    </div>
  );
};
