interface CategorySelectorProps {
  categories: { id: string; label: string }[];
  value: string | null;
  onChange: (id: string) => void;
  disabled?: boolean;
}

export default function CategorySelector({
  categories,
  value,
  onChange,
  disabled,
}: CategorySelectorProps) {
  return (
    <div className="flex flex-wrap gap-2">
      {categories.map((cat) => {
        const isActive = cat.id === value;
        return (
          <button
            key={cat.id}
            type="button"
            disabled={disabled}
            onClick={() => onChange(cat.id)}
            className={`text-[11px] px-3 py-1.5 rounded-full border transition-all ${
              isActive ? "text-white" : "text-[var(--ye-text)]"
            } ${disabled ? "opacity-60 cursor-not-allowed" : ""}`}
            style={{
              backgroundColor: isActive ? "var(--ye-primary)" : "var(--ye-bg)",
              borderColor: "var(--ye-primary)",
            }}
          >
            {cat.label}
          </button>
        );
      })}
    </div>
  );
}