import React from 'react';
import { WizardState, EventType } from '../types';
import { Trophy, Tent, Ticket, PartyPopper, Briefcase, Sparkles } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';

interface StepEventTypeProps {
  data: WizardState;
  updateData: (updates: Partial<WizardState>) => void;
  nextStep: () => void;
}

const StepEventType: React.FC<StepEventTypeProps> = ({ data, updateData, nextStep }) => {

  const handleSelect = (eventType: EventType) => {
    updateData({ eventType });
    setTimeout(nextStep, 150);
  };

  const types: { id: EventType; label: string; icon: React.ReactNode }[] = [
    { id: 'sport', label: UI_TEXT.stepType.types.sport, icon: <Trophy size={32} /> },
    { id: 'culture', label: UI_TEXT.stepType.types.culture, icon: <Ticket size={32} /> },
    { id: 'trip', label: UI_TEXT.stepType.types.trip, icon: <Tent size={32} /> },
    { id: 'party', label: UI_TEXT.stepType.types.party, icon: <PartyPopper size={32} /> },
    { id: 'work', label: UI_TEXT.stepType.types.work, icon: <Briefcase size={32} /> },
    { id: 'other', label: UI_TEXT.stepType.types.other, icon: <Sparkles size={32} /> },
  ];

  return (
    <div className="space-y-8 animate-fade-in">
      <div>
        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepType.title}</h2>
        <p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepType.subtitle}</p>
        
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
          {types.map((type) => (
             <button
                key={type.id}
                onClick={() => handleSelect(type.id)}
                className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-40 ${
                  data.eventType === type.id
                    ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
                    : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
                }`}
             >
               <div className={`mb-4 transition-colors ${data.eventType === type.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
                 {type.icon}
               </div>
               <span className="font-bold text-sm leading-tight">{type.label}</span>
             </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default StepEventType;