import Image from "next/image";
import type { Doctor } from "@/types/doctor.type";

interface LayananPoliKBDoctorSectionProps {
  title: string;
  subtitle: string;
  doctors: Doctor[];
}

const LayananPoliKBDoctorSection = ({
  title,
  subtitle,
  doctors,
}: LayananPoliKBDoctorSectionProps) => {
  // If no doctors from CMS, show placeholder
  const displayDoctors = doctors.length > 0 ? doctors : Array.from({ length: 6 });

  return (
    <section className="bg-background-custom p-6">
      <div className="max-w-7xl mx-auto flex flex-col gap-4">
        <h2 className="text-4xl font-semibold text-text-sub">{title}</h2>
        <h4 className="text-xl text-foreground">{subtitle}</h4>

        <div className="flex gap-3 overflow-hidden pb-32 overflow-x-auto no-scrollbar">
          {displayDoctors.map((doctor, idx) => {
            const isRealDoctor =
              typeof doctor === "object" && doctor !== null && "id" in doctor;
            const doctorData = isRealDoctor ? (doctor as Doctor) : null;
            const key = doctorData?.id || `placeholder-${idx}`;

            return (
              <div
                key={key}
                className="aspect-square rounded-lg relative w-95 h-92 hover:h-110 shrink-0 cursor-pointer hover:aspect-4/3 transform transition-all duration-300 group"
              >
                <Image
                  src={
                    doctorData?.imageUrl ||
                    "/assets/layanan/poli-umum/doctor.jpg"
                  }
                  alt={doctorData?.name || "Dokter"}
                  fill
                  className="object-cover rounded-lg opacity-80 grayscale group-hover:grayscale-0 transition-all duration-300"
                />

                <div
                  className="hidden group-hover:flex flex-col p-2 rounded-lg bg-white/30 backdrop-blur-lg absolute z-20 bottom-2 right-2 left-2 border border-white items-center"
                  style={{
                    boxShadow: "0px 4px 8px 0px #8B8B8B40",
                  }}
                >
                  <span className="font-semibold text-primary text-lg">
                    {doctorData?.name || "Dr. Dedy Sukmo Anggoro"}
                  </span>
                  <span className="text-sm">
                    {doctorData?.title || "Ahli poli KB"}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default LayananPoliKBDoctorSection;