import { Ruler } from "lucide-react";

interface SizeSelectorProps {
  sizes: string[] | undefined;
  selectedSize: string | null;
  setSelectedSize: (size: string) => void;
  /** When provided, shows a "راهنمای سایز" link that opens the size guide. */
  onSizeGuide?: () => void;
}

export const SizeSelector = ({
  sizes,
  selectedSize,
  setSelectedSize,
  onSizeGuide,
}: SizeSelectorProps) => (
  <div className="flex flex-col gap-4 mt-10 px-4">
    <div className="flex items-center justify-between">
      <p className="text-B18 font-bold">انتخاب سایز</p>
      {onSizeGuide && (
        <button
          type="button"
          onClick={onSizeGuide}
          className="flex items-center gap-1 text-R12 text-VITROWN_BLUE hover:underline cursor-pointer"
        >
          <Ruler className="h-3.5 w-3.5" />
          راهنمای سایز
        </button>
      )}
    </div>
    <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>
);