import React from 'react';
import { Briefcase } from 'lucide-react';

interface Props {
  formData: { employment_status: string; citizenship: string };
  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
}

const EmploymentSection: React.FC<Props> = ({ formData, onChange }) => (
  <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
    <div className="flex items-center space-x-3 mb-4">
      <Briefcase className="w-5 h-5 text-blue-500" />
      <h3 className="text-lg font-semibold text-gray-900">Employment & Status</h3>
    </div>
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Employment Status</label>
        <select
          name="employment_status"
          value={formData.employment_status}
          onChange={onChange}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
        >
          <option value="">Select an option</option>
          <option value="Employed with employer coverage">Employed with employer coverage</option>
          <option value="Employed without coverage">Employed without coverage</option>
          <option value="Unemployed">Unemployed</option>
          <option value="Retired">Retired</option>
          <option value="Student">Student</option>
          <option value="Self-employed">Self-employed</option>
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Citizenship Status</label>
        <select
          name="citizenship"
          value={formData.citizenship}
          onChange={onChange}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
        >
          <option value="">Select an option</option>
          <option value="US Citizen">US Citizen</option>
          <option value="Lawful Permanent Resident">Lawful Permanent Resident</option>
          <option value="Other legal resident">Other legal resident</option>
          <option value="Non-resident">Non-resident</option>
        </select>
      </div>
    </div>
  </div>
);

export default EmploymentSection;