'use client';

const doctors = [
  { id: '1', name: 'Dr. Amina Yusuf' },
  { id: '2', name: 'Dr. John Kamau' },
  { id: '3', name: 'Dr. Grace Odhiambo' },
];

export default function DoctorSelection({ selectedDoctor, setSelectedDoctor }) {
  return (
    <div className="bg-white p-4 rounded shadow-md">
      <label className="block mb-2 font-semibold text-gray-700">Select Doctor:</label>
      <select
        value={selectedDoctor}
        onChange={(e) => setSelectedDoctor(e.target.value)}
        className="p-2 border border-gray-300 rounded"
      >
        <option value="">-- Choose a doctor --</option>
        {doctors.map((doc) => (
          <option key={doc.id} value={doc.name}>
            {doc.name}
          </option>
        ))}
      </select>
    </div>
  );
}
