import { useState } from 'react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" import { RadioGroup, RadioGroupItem } from "/components/ui/radio-group" import { User, Mail, Home, Clock } from 'lucide-react' type Doctor = { id: number name: string specialty: string experience: string availableSlots: string[] } type PatientInfo = { name: string email: string address: string symptoms: string } const specialties = [ 'General Practitioner', 'Cardiologist', 'Dermatologist', 'Pediatrician', 'Neurologist' ] const doctors: Doctor[] = [ { id: 1, name: 'Dr. Sarah Johnson', specialty: 'General Practitioner', experience: '10 years experience', availableSlots: ['9:00 AM', '10:30 AM', '1:00 PM', '3:30 PM'] }, { id: 2, name: 'Dr. Michael Chen', specialty: 'General Practitioner', experience: '8 years experience', availableSlots: ['8:00 AM', '11:00 AM', '2:00 PM', '4:30 PM'] }, { id: 3, name: 'Dr. Emily Wilson', specialty: 'Cardiologist', experience: '12 years experience', availableSlots: ['10:00 AM', '12:30 PM', '3:00 PM'] }, { id: 4, name: 'Dr. Robert Davis', specialty: 'Dermatologist', experience: '15 years experience', availableSlots: ['9:30 AM', '11:30 AM', '2:30 PM'] }, { id: 5, name: 'Dr. Lisa Thompson', specialty: 'Pediatrician', experience: '7 years experience', availableSlots: ['8:30 AM', '1:30 PM', '4:00 PM'] } ] export default function AppointmentBooking() { const [step, setStep] = useState(1) const [patientInfo, setPatientInfo] = useState({ name: '', email: '', address: '', symptoms: '' }) const [selectedSpecialty, setSelectedSpecialty] = useState('') const [selectedDoctor, setSelectedDoctor] = useState(null) const [selectedSlot, setSelectedSlot] = useState('') const [errors, setErrors] = useState>({}) const validateStep1 = () => { const newErrors: Record = {} if (!patientInfo.name) newErrors.name = 'Name is required' if (!patientInfo.email) { newErrors.email = 'Email is required' } else if (!/^\S+@\S+\.\S+$/.test(patientInfo.email)) { newErrors.email = 'Email is invalid' } if (!patientInfo.address) newErrors.address = 'Address is required' if (!patientInfo.symptoms) newErrors.symptoms = 'Symptoms description is required' setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleNextStep = () => { if (step === 1 && !validateStep1()) return if (step === 2 && !selectedDoctor) { setErrors({...errors, doctor: 'Please select a doctor'}) return } if (step === 3 && !selectedSlot) { setErrors({...errors, slot: 'Please select a time slot'}) return } setStep(step + 1) } const handlePrevStep = () => { setStep(step - 1) } const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setPatientInfo({ ...patientInfo, [name]: value }) if (errors[name]) { setErrors({ ...errors, [name]: '' }) } } const handleSubmit = () => { console.log('Appointment booked:', { patientInfo, doctor: selectedDoctor, timeSlot: selectedSlot }) alert('Appointment booked successfully!') } const filteredDoctors = selectedSpecialty ? doctors.filter(doctor => doctor.specialty === selectedSpecialty) : doctors return (

Book a Doctor's Appointment {/* Progress Steps */}

{[1, 2, 3].map((stepNumber) => (

stepNumber ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-600' }`} > {stepNumber}

{stepNumber === 1 && 'Patient Info'} {stepNumber === 2 && 'Select Doctor'} {stepNumber === 3 && 'Book Slot'}

))}

{/* Step 1: Patient Information */} {step === 1 && (

Full Name

{errors.name &&

{errors.name}

}

{errors.email &&

{errors.email}

}

Address

{errors.address &&

{errors.address}

}

Symptoms {errors.symptoms &&

{errors.symptoms}

}

)} {/* Step 2: Select Doctor */} {step === 2 && (

Select Specialty {specialties.map((specialty) => (

{specialty}

))}

Available Doctors {errors.doctor &&

{errors.doctor}

}

{filteredDoctors.map((doctor) => (

setSelectedDoctor(doctor)} className={`p-4 border rounded-lg cursor-pointer transition-colors ${ selectedDoctor?.id === doctor.id ? 'border-primary bg-primary/10' : 'hover:bg-gray-50' }`} >

{doctor.name}

{doctor.experience}

{doctor.specialty}

))}

)} {/* Step 3: Book Time Slot */} {step === 3 && selectedDoctor && (

{selectedDoctor.name}

{selectedDoctor.experience}

{selectedDoctor.specialty}

Available Time Slots {errors.slot &&

{errors.slot}

}

{selectedDoctor.availableSlots.map((slot) => (

setSelectedSlot(slot)} className={`p-3 border rounded-lg cursor-pointer flex items-center justify-center ${ selectedSlot === slot ? 'border-primary bg-primary/10' : 'hover:bg-gray-50' }`} > {slot}

))}

)} {/* Confirmation Step */} {step === 4 && (

Confirm Your Appointment

Please review your appointment details

Patient Information

Name: {patientInfo.name}

Email: {patientInfo.email}

Address: {patientInfo.address}

Symptoms: {patientInfo.symptoms}

Appointment Details

Doctor: {selectedDoctor?.name}

Specialty: {selectedDoctor?.specialty}

Time: {selectedSlot}

)} {/* Navigation Buttons */}

{step > 1 && step < 4 && ( )} {step < 3 && ( )} {step === 3 && ( )} {step === 4 && ( )}

) }