import { Briefcase } from 'lucide-react';
import type { VocationalWorkflow } from '@/components/vocational-opportunities/types';
import { VocationalIcon } from '@/components/vocational-opportunities/VocationalIcon';

interface VocationalPreSearchStateProps {
  readonly workflow: VocationalWorkflow;
}

export function VocationalPreSearchState({ workflow }: VocationalPreSearchStateProps) {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-8">
      <div className="text-center mb-8">
        <Briefcase size={48} className="text-sky-500/40 mx-auto mb-4" />
        <h3 className="font-semibold text-white text-lg mb-2">Enter Your Zip Code to Get Started</h3>
        <p className="text-sm text-slate-400 max-w-lg mx-auto">
          We&apos;ll find vocational training programs, internships, and job opportunities near your school that provide autism-specific accommodations and support.
        </p>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        {workflow.categoryPreviews.map((category) => (
          <div key={category.name} className={`bg-gradient-to-br ${category.color} rounded-xl border p-4 text-center`}>
            <div className="mx-auto mb-2 flex justify-center">
              <VocationalIcon iconKey={category.iconKey} size={20} />
            </div>
            <p className="text-xs font-medium text-slate-300">{category.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
