'use client'

import { COMPANY_PROFILE_PRESETS, type CompanyProfilePreset } from '@/lib/sdk/company-profile-presets'

interface PresetSelectorProps {
  onSelect: (preset: CompanyProfilePreset) => void
  onSkip: () => void
}

export function PresetSelector({ onSelect, onSkip }: PresetSelectorProps) {
  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-xl font-bold text-gray-900">Welcher Unternehmenstyp passt zu Ihnen?</h2>
        <p className="text-sm text-gray-500 mt-2">
          Waehlen Sie eine Vorlage fuer Ihre Branche — alle Felder werden vorbefuellt
          und Sie koennen anschliessend anpassen.
        </p>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
        {COMPANY_PROFILE_PRESETS.map((preset) => (
          <button
            key={preset.id}
            onClick={() => onSelect(preset)}
            className="flex flex-col items-center gap-2 p-4 bg-white border border-gray-200 rounded-xl hover:border-purple-400 hover:shadow-md transition-all text-center group"
          >
            <span className="text-3xl">{preset.icon}</span>
            <span className="text-sm font-medium text-gray-900 group-hover:text-purple-700">
              {preset.label}
            </span>
            <span className="text-xs text-gray-500 leading-tight">
              {preset.description}
            </span>
          </button>
        ))}
      </div>

      <div className="text-center">
        <button
          onClick={onSkip}
          className="text-sm text-gray-400 hover:text-gray-600 underline"
        >
          Manuell ausfuellen (ohne Vorlage)
        </button>
      </div>
    </div>
  )
}