metis-desk/packages/rdx-ui/src/components/icon-picker.tsx

import { Label } from "@repo/shadcn-ui/components/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@repo/shadcn-ui/components/select";
import type { ReactNode } from "react";
import { useId } from "react";

/** Selección compacta con vista previa; el consumidor aporta iconos, textos y claves válidas. */
export function IconPicker({
  label,
  description,
  describedBy,
  options,
  value,
  onChange,
  disabled = false,
}: {
  label: string;
  description?: string;
  describedBy?: string;
  options: readonly { value: string; label: string; icon: ReactNode }[];
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
}) {
  const id = useId();
  const selected = options.find((option) => option.value === value);
  const descriptionIds =
    [description ? `${id}-description` : undefined, describedBy].filter(Boolean).join(" ") ||
    undefined;

  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}</Label>
      <Select
        disabled={disabled}
        items={options.map((option) => ({ value: option.value, label: option.label }))}
        onValueChange={(next) => {
          if (typeof next === "string") {
            onChange(next);
          }
        }}
        value={value}
      >
        <SelectTrigger aria-describedby={descriptionIds} className="w-full sm:max-w-64" id={id}>
          <SelectValue>
            <span aria-hidden="true" className="shrink-0">
              {selected?.icon}
            </span>
            <span className="truncate">{selected?.label}</span>
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              <span aria-hidden="true" className="shrink-0">
                {option.icon}
              </span>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {description && (
        <p className="text-sm text-muted-foreground" id={`${id}-description`}>
          {description}
        </p>
      )}
    </div>
  );
}