import React from 'react';
import { WizardState } from '../types';
import { Instagram, Youtube, Activity } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';

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

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

  const handleSelect = (platform: WizardState['platform']) => {
    updateData({ platform });
    setTimeout(nextStep, 150);
  };

  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.stepPlatform.title}</h2>
        <p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepPlatform.subtitle}</p>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <button
            onClick={() => handleSelect('instagram')}
            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
              data.platform === 'instagram'
                ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
                : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
            }`}
          >
            <Instagram size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'instagram' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
            <span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.instagram.title}</span>
            <span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.instagram.desc}</span>
          </button>

          <button
            onClick={() => handleSelect('youtube')}
            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
              data.platform === 'youtube'
                 ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
                 : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
            }`}
          >
            <Youtube size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'youtube' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
            <span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.youtube.title}</span>
            <span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.youtube.desc}</span>
          </button>

          <button
            onClick={() => handleSelect('strava')}
            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
              data.platform === 'strava'
                 ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
                 : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
            }`}
          >
            <Activity size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'strava' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
            <span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.strava.title}</span>
            <span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.strava.desc}</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default StepPlatform;