import type { AppRegistry } from './types';

type AppPickerProps = {
  registry: AppRegistry;
  onSelect: (appType: string) => void;
};

export const AppPicker = ({ registry, onSelect }: AppPickerProps) => {
  const entries = Object.entries(registry).filter(([, entry]) => !entry.widget && entry.availableOnPanel !== false);

  return (
    <div className="flex flex-wrap gap-1.5 max-w-md">
      {entries.map(([key, entry]) => (
        <button
          key={key}
          type="button"
          className="flex items-center gap-1.5 rounded-full border border-duck-teal/25 bg-background/80 backdrop-blur-sm px-3 py-1.5 text-duck-teal hover:border-duck-teal/40 hover:bg-background/90 transition-colors cursor-pointer"
          onClick={() => onSelect(key)}
        >
          <entry.icon className="h-3.5 w-3.5 shrink-0" />
          <span className="text-xs font-medium whitespace-nowrap">{entry.name}</span>
        </button>
      ))}
    </div>
  );
};