import { Type, PenLine, CheckSquare, FileText, Minus } from 'lucide-react';
import type { PdfFormFieldType } from './types';

const PALETTE_ITEMS: { type: PdfFormFieldType; label: string; icon: React.ElementType; description: string }[] = [
  { type: 'text-line', label: 'Text Line', icon: Type, description: 'Blank line for writing' },
  { type: 'signature-line', label: 'Signature Line', icon: PenLine, description: 'Signature + date line' },
  { type: 'checkbox', label: 'Checkbox', icon: CheckSquare, description: 'Checkbox options' },
  { type: 'text-block', label: 'Text Block', icon: FileText, description: 'Static text / heading' },
  { type: 'spacer', label: 'Spacer', icon: Minus, description: 'Vertical spacing' },
];

interface Props {
  onAdd: (type: PdfFormFieldType) => void;
}

export function PdfFormFieldPalette({ onAdd }: Props) {
  return (
    <div className="space-y-1">
      <h3 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
        Add Fields
      </h3>
      {PALETTE_ITEMS.map((item) => (
        <button
          key={item.type}
          onClick={() => onAdd(item.type)}
          className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-md text-left hover:bg-accent transition-colors border border-transparent hover:border-border"
        >
          <item.icon className="h-4 w-4 text-primary shrink-0" />
          <div>
            <div className="text-xs font-medium text-foreground">{item.label}</div>
            <div className="text-[10px] text-muted-foreground">{item.description}</div>
          </div>
        </button>
      ))}
    </div>
  );
}
