import { MapPin, Search } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import type { VocationalWorkflow } from '@/components/vocational-opportunities/types';

interface VocationalZipSearchProps {
  readonly workflow: VocationalWorkflow;
}

export function VocationalZipSearch({ workflow }: VocationalZipSearchProps) {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-6">
      <h3 className="font-semibold text-white mb-4 flex items-center gap-2">
        <MapPin size={18} className="text-sky-400" />
        Search by Zip Code
      </h3>
      <div className="flex flex-col sm:flex-row gap-3">
        <div className="relative flex-1 max-w-xs">
          <MapPin size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
          <Input
            type="text"
            value={workflow.zipCode}
            onChange={(event) => workflow.updateZipCode(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === 'Enter') workflow.searchByZipCode();
            }}
            placeholder="Enter zip code (e.g., 85001)"
            className="w-full pl-9 pr-4 py-3 bg-slate-700/50 border border-slate-600/50 rounded-xl text-white placeholder-slate-500 focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/50 outline-none text-lg tracking-wider"
            maxLength={5}
          />
        </div>
        <Button
          type="button"
          onClick={workflow.searchByZipCode}
          disabled={workflow.zipCode.length < 5 || workflow.isSearching}
          loading={workflow.isSearching}
          loadingLabel="Searching..."
          leadingIcon={<Search size={16} />}
          className="px-8 py-3 bg-gradient-to-r from-sky-500 to-blue-600 text-white rounded-xl font-semibold text-sm hover:shadow-lg hover:shadow-sky-500/25 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
        >
          Find Opportunities
        </Button>
      </div>
      <p className="text-xs text-slate-500 mt-2">Try zip codes: 85001, 85003, 85004, 85015, 85018, 85034, 85040, 85283</p>
    </div>
  );
}
