src/components/LocationSection.tsx

import React from 'react';
import { MapPin, CheckCircle } from 'lucide-react';

interface Props {
  formData: { zip_code: string };
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  isValidatingZip: boolean;
  zipError: string;
  userProfile: { city?: string; county?: string; state?: string };
}

const LocationSection: React.FC<Props> = ({ formData, onChange, isValidatingZip, zipError, userProfile }) => (
  <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
    <div className="flex items-center space-x-3 mb-4">
      <MapPin className="w-5 h-5 text-blue-500" />
      <h3 className="text-lg font-semibold text-gray-900">Location</h3>
    </div>
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          ZIP Code
        </label>
        <input
          type="text"
          name="zip_code"
          value={formData.zip_code}
          onChange={onChange}
          placeholder="Enter your 5-digit ZIP code"
          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"
          maxLength={5}
        />
        {isValidatingZip && (
          <p className="text-sm text-blue-600 mt-1">Validating ZIP code...</p>
        )}
        {zipError && (
          <p className="text-sm text-red-600 mt-1">{zipError}</p>
        )}
      </div>
      {userProfile.city && (
        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
          <div className="flex items-center space-x-2">
            <CheckCircle className="w-5 h-5 text-green-500" />
            <span className="font-medium text-green-800">Location Verified</span>
          </div>
          <p className="text-sm text-green-700 mt-1">
            {userProfile.county} County, {userProfile.city}, {userProfile.state}
          </p>
        </div>
      )}
    </div>
  </div>
);

export default LocationSection;