src/components/PersonalInfoSection.tsx

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

interface Props {
  formData: { age: string; gender: string };
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
}

const PersonalInfoSection: 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">
      <User className="w-5 h-5 text-blue-500" />
      <h3 className="text-lg font-semibold text-gray-900">Personal 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">Age</label>
        <input
          type="number"
          name="age"
          value={formData.age}
          onChange={onChange}
          placeholder="Enter your age"
          min="1"
          max="120"
          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">Gender</label>
        <select
          name="gender"
          value={formData.gender}
          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="Male">Male</option>
          <option value="Female">Female</option>
          <option value="Non-binary">Non-binary</option>
          <option value="Prefer not to say">Prefer not to say</option>
        </select>
      </div>
    </div>
  </div>
);

export default PersonalInfoSection;