'use client';

import * as React from 'react';
import { FormState } from '../types';
import { AlertCircle } from 'lucide-react';

interface TimelineStepProps {
  state: FormState;
  updateState: (updates: Partial<FormState>) => void;
}

export function TimelineStep({ state, updateState }: TimelineStepProps) {
  return (
    <div className="space-y-12">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {[
          { id: 'asap', label: 'So schnell wie möglich', desc: 'Priorisierter Start gewünscht.' },
          { id: '2-3-months', label: 'In 2-3 Monaten', desc: 'Normaler Projektvorlauf.' },
          { id: '3-6-months', label: 'In 3-6 Monaten', desc: 'Langfristige Planung.' },
          { id: 'flexible', label: 'Flexibel', desc: 'Kein fester Termindruck.' },
        ].map(opt => (
          <button
            key={opt.id}
            type="button"
            onClick={() => updateState({ deadline: opt.id })}
            className={`p-10 rounded-[2.5rem] border-2 text-left transition-all focus:outline-none overflow-hidden relative ${
              state.deadline === opt.id ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-100 bg-white hover:border-slate-200'
            }`}
          >
            <h4 className={`text-2xl font-bold mb-2 ${state.deadline === opt.id ? 'text-white' : 'text-slate-900'}`}>{opt.label}</h4>
            <p className={`text-lg ${state.deadline === opt.id ? 'text-slate-200' : 'text-slate-500'}`}>{opt.desc}</p>
          </button>
        ))}
      </div>
      {state.deadline === 'asap' && (
        <div className="p-8 bg-slate-50 rounded-[2rem] border border-slate-100 flex gap-6 items-start">
          <AlertCircle className="text-slate-900 shrink-0 mt-1" size={28} />
          <p className="text-base text-slate-600 leading-relaxed">
            <strong>Hinweis:</strong> Bei sehr kurzfristigen Deadlines kann ein Express-Zuschlag anfallen, um die Kapazitäten entsprechend zu priorisieren.
          </p>
        </div>
      )}
    </div>
  );
}