import { widgetRegistry } from '../widget-registry';

type WidgetPickerProps = {
  onSelect: (widgetType: string) => void;
};

export const WidgetPicker = ({ onSelect }: WidgetPickerProps) => {
  const entries = Object.entries(widgetRegistry);

  return (
    <div className="grid grid-cols-3 gap-2 max-w-xs">
      {entries.map(([key, entry]) => (
        <button
          key={key}
          type="button"
          className="flex flex-col items-center gap-1.5 rounded-lg border border-border/50 bg-card/80 backdrop-blur-sm px-3 py-3 text-foreground hover:border-border hover:bg-card transition-colors cursor-pointer"
          onClick={() => onSelect(key)}
        >
          <entry.icon className="h-5 w-5" />
          <span className="text-xs font-medium leading-tight text-center">{entry.name}</span>
        </button>
      ))}
    </div>
  );
};