import React from 'react';
import { User, Mail, Phone, MapPin, Stethoscope, Calendar } from 'lucide-react';
import { Doctor } from '../../types/doctor/doctor';
import { getStatusLabel, getStatusColor } from '../../utils/doctorStatus';

interface DoctorDetailViewProps {
  doctor: Doctor;
}

export const DoctorDetailView: React.FC<DoctorDetailViewProps> = ({ doctor }) => {
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center space-x-4 mb-6">
        <div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center">
          <User className="w-8 h-8 text-teal-600" />
        </div>
        <div>
         <h2 className="font-semibold text-gray-900 line-clamp-2">
            Dr. {doctor.firstName} {doctor.lastName}
          </h2>
          <p className="text-lg text-gray-600">{doctor.specialization?.specializationId}</p>
        <span className={`px-2 py-1 text-xs font-medium rounded-full border ${getStatusColor(doctor.status)}`}>
          {getStatusLabel(doctor.status)}
        </span>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-900">Contact Information</h3>
          <div className="space-y-3">
            <div className="flex items-center">
              <Mail className="w-5 h-5 text-gray-400 mr-3" />
              <span className="text-gray-700">{doctor.emailAddress}</span>
            </div>
            <div className="flex items-center">
              <Phone className="w-5 h-5 text-gray-400 mr-3" />
              <span className="text-gray-700">{doctor.phoneNo}</span>
            </div>
            <div className="flex items-start">
              <MapPin className="w-5 h-5 text-gray-400 mr-3 mt-0.5" />
              <span className="text-gray-700">{doctor.address}</span>
            </div>
          </div>
        </div>

        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-900">Professional Details</h3>
          <div className="space-y-3">
            <div className="flex items-center">
              <Stethoscope className="w-5 h-5 text-gray-400 mr-3" />
              <span className="text-gray-700">{doctor.licenseNo || ''}</span>
            </div>
            <div className="flex items-center">
              <Calendar className="w-5 h-5 text-gray-400 mr-3" />
              <div>
                <p className="text-sm text-gray-500">Date of Birth</p>
                <p className="text-gray-700">{formatDate(doctor.birthDate || '')}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};