import { Button } from "@repo/shadcn-ui/components/button";
import type { ReactNode } from "react";

export function IconPicker({
  label,
  options,
  value,
  onChange,
  disabled = false,
}: {
  label: string;
  options: readonly { value: string; label: string; icon: ReactNode }[];
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
}) {
  return (
    <fieldset className="space-y-2" disabled={disabled}>
      <legend className="text-sm font-medium">{label}</legend>
      <div className="flex flex-wrap gap-2">
        {options.map((option) => (
          <Button
            aria-label={option.label}
            aria-pressed={value === option.value}
            className={
              value === option.value ? "border-primary text-primary ring-1 ring-primary" : ""
            }
            key={option.value}
            onClick={() => onChange(option.value)}
            size="icon"
            title={option.label}
            type="button"
            variant={value === option.value ? "secondary" : "outline"}
          >
            {option.icon}
          </Button>
        ))}
      </div>
    </fieldset>
  );
}