src/components/HouseholdInfoSection.tsx

import React from 'react';
import { Users, DollarSign } from 'lucide-react';

interface Props {
  formData: { household_size: string; income: string };
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const HouseholdInfoSection: 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">
      <Users className="w-5 h-5 text-blue-500" />
      <h3 className="text-lg font-semibold text-gray-900">Household Information</h3>
    </div>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Household Size</label>
        <input
          type="number"
          name="household_size"
          value={formData.household_size}
          onChange={onChange}
          placeholder="Including yourself"
          min="1"
          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"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Annual Income</label>
        <div className="relative">
          <DollarSign className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
          <input
            type="number"
            name="income"
            value={formData.income}
            onChange={onChange}
            placeholder="55000"
            min="0"
            className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
          />
        </div>
      </div>
    </div>
  </div>
);

export default HouseholdInfoSection;