import LikeDI from "@/components/icons/LikeDI"
import StarDI from "@/components/icons/StarDI"
import TickCircle from "@/components/icons/TickCircle"
import Image from "next/image"

function Title({ doctor }) {
    return (
        <div className="flex items-center justify-start gap-8">
            <Image
                src={doctor.img}
                width={164}
                height={164}
                alt="img-doctor"
            />
            <div className="flex flex-col items-start gap-4">
                <p className="text-[#3B3B3B] text-[20px] font-bold">{doctor.name}</p>
                <p className="text-[#525252] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
                <div className="flex items-center justify-start gap-11">
                    <p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
                    <div className="flex items-center gap-1">
                        <TickCircle />
                        <p className="text-[#525252] text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
                    </div>
                </div>
                <div className="flex items-center justify-start gap-2">
                    <div className="flex p-1 gap-0.5 items-center justify-center">
                        <StarDI />
                        <p className="text-[#616161] text-[14px] font-normal">امتیاز: {doctor.point}</p>
                    </div>
                    <div className="flex p-1 items-center gap-0.5">
                        <LikeDI />
                        <p className="text-[#616161] text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Title