'use client'

import { DSRType, DSR_TYPE_INFO } from '@/lib/sdk/dsr/types'

export function TypeSelector({
  selectedType,
  onSelect
}: {
  selectedType: DSRType | ''
  onSelect: (type: DSRType) => void
}) {
  return (
    <div className="space-y-3">
      <label className="block text-sm font-medium text-gray-700">
        Art der Anfrage <span className="text-red-500">*</span>
      </label>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        {Object.entries(DSR_TYPE_INFO).map(([type, info]) => (
          <button
            key={type}
            type="button"
            onClick={() => onSelect(type as DSRType)}
            className={`
              p-4 rounded-xl border-2 text-left transition-all
              ${selectedType === type
                ? 'border-purple-500 bg-purple-50'
                : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
              }
            `}
          >
            <div className="flex items-start gap-3">
              <div className={`
                w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0
                ${selectedType === type ? 'bg-purple-100' : info.bgColor}
              `}>
                <span className={`text-sm font-bold ${selectedType === type ? 'text-purple-600' : info.color}`}>
                  {info.article.split(' ')[1]}
                </span>
              </div>
              <div className="flex-1 min-w-0">
                <div className={`font-medium ${selectedType === type ? 'text-purple-700' : 'text-gray-900'}`}>
                  {info.labelShort}
                </div>
                <div className="text-xs text-gray-500 mt-0.5">
                  {info.article}
                </div>
              </div>
            </div>
          </button>
        ))}
      </div>
      {selectedType && (
        <div className={`p-4 rounded-xl ${DSR_TYPE_INFO[selectedType].bgColor} border border-gray-200`}>
          <div className={`font-medium ${DSR_TYPE_INFO[selectedType].color}`}>
            {DSR_TYPE_INFO[selectedType].label}
          </div>
          <p className="text-sm text-gray-600 mt-1">
            {DSR_TYPE_INFO[selectedType].description}
          </p>
          <div className="text-xs text-gray-500 mt-2">
            Standardfrist: {DSR_TYPE_INFO[selectedType].defaultDeadlineDays} Tage
            {DSR_TYPE_INFO[selectedType].maxExtensionMonths > 0 && (
              <> | Verlaengerbar um {DSR_TYPE_INFO[selectedType].maxExtensionMonths} Monate</>
            )}
          </div>
        </div>
      )}
    </div>
  )
}
