"use client";

import { Icon } from "@/components/ui/Icon";

/**
 * Reihe auswählbarer Symbole — Gegenstück zu <Swatches/>.
 * Nutzt bewusst die vorhandene `.icon-pick`-Optik aus dem Kanban-Modul,
 * damit Symbolauswahlen überall gleich aussehen.
 */
export function IconPicker({
  value,
  onChange,
  options,
}: {
  value: string;
  onChange: (icon: string) => void;
  options: string[];
}) {
  return (
    <div className="icon-row">
      {options.map((name) => (
        <button
          key={name}
          type="button"
          className="icon-pick"
          data-active={value === name}
          onClick={() => onChange(name)}
          aria-label={name}
        >
          <Icon name={name} size={17} />
        </button>
      ))}
    </div>
  );
}