import Image, { StaticImageData } from 'next/image'
import Chokri from "../../../../public/images/chokri-lamloum.png"
import { getImageSrc } from "@/utils/image"

interface DoctorSpecialistCardProps {

    doctorImage: StaticImageData | string,
    doctorName: string,
    doctorSpeciality: string,
    doctorDepartment: string,
    className?: string,
}


export default function DoctorSpecialistCard({ doctorImage, doctorName, doctorSpeciality, doctorDepartment, className }: DoctorSpecialistCardProps) {
    const imageSrc = getImageSrc(doctorImage) || Chokri;

    return (
        <div className={`bg-white rounded-[16px] border border-[#E5E9ED] transition-all duration-500 hover:shadow-[0_12px_48px_0_rgba(0,0,0,0.08)] overflow-hidden flex flex-col h-full ${className || ''}`}>
            <figure className="relative w-full aspect-[290/305] shrink-0 overflow-hidden rounded-t-[16px] bg-[#F4F6F8]">
                <Image
                    src={imageSrc}
                    width={290}
                    height={305}
                    alt={doctorName || "doctor-image"}
                    className="w-full h-full object-cover object-top rounded-t-[16px]"
                />
            </figure>
            <div className='p-4 md:p-6 flex flex-col flex-1 justify-between'>
                <div>
                    <h3 className='text-[16px] md:text-[20px] text-[#00204F] font-bold mb-1 md:mb-2'>{doctorName}</h3>
                    <p className='text-[14px] md:text-[16px] text-[#334D72] font-normal mb-2 md:mb-4'>{doctorSpeciality}</p>
                </div>
                {doctorDepartment && (
                    <div className="pt-2 mt-auto">
                        <span className='text-[12px] md:text-[14px] text-[#1718FF] font-medium border border-[#B3CCFF] bg-[#E8F1FF] rounded-[100px] inline-block py-1 px-3'>
                            {doctorDepartment}
                        </span>
                    </div>
                )}
            </div>
        </div>
    )
}