"use client";

import Image from "next/image";
import { useState } from "react";
import { withCDN } from "@/src/lib/utils";
import TeachersLazyWrapper from "./TeachersLazyWrapper";
import type { ProgramsPageSection } from "@/src/lib/services/programsPageService";

interface TeachersProps {
  teacherData?: ProgramsPageSection;
}

export default function Teachers({ teacherData }: TeachersProps) {
  const heading = teacherData?.heading || "MEET OUR TEACHERS";

  // Instructors are optional. The list is fetched lazily once this section
  // scrolls into view, so the shell has to mount first for that to happen — but
  // as soon as we learn the franchise has none, the whole section (heading and
  // curved background included) is removed instead of left standing empty.
  const [hasNoTeachers, setHasNoTeachers] = useState(false);

  if (hasNoTeachers) return null;

  return (
    <section
      className="
      relative w-full overflow-hidden z-20 py-24 xl:h-[800px] min-h-[800px] xl:min-h-[950px] md:min-h-[750px] lg:min-h-[900px]
      -mt-[404px]       /* mobile */   
      md:-mt-[200px]     /* tablet */
      lg:-mt-[300px]   /* desktop */
      xl:-mt-[424px]    /* large desktop */
      max-[430px]:-mt-[400px] /* small mobile */
      max-[380px]:-mt-[350px] /* small mobile */
      teacher-block
    "
    >
      {/* Curved Background Image */}
      <div className="absolute inset-0 w-full h-full -z-10">
        {/* Desktop / Large */}
        <Image
          src={withCDN("/teachers/meetOurTeachers.svg")}
          alt="Curved background"
          fill
          className="object-cover object-top hidden lg:block mt-[-70px] xl:mt-[-40px]"
          priority
        />

        {/* Tablet */}
        <Image
          src={withCDN("/teachers/MeetOurTeachersTab.png")}
          alt="Curved background for tablet"
          fill
          className="object-fit object-top hidden md:block lg:hidden mt-[-45px]"
          priority
        />

        {/* Mobile */}
        <Image
          src={withCDN("/teachers/meetOurTeachers.svg")}
          alt="Curved background for mobile"
          fill
          className="object-cover object-left block md:hidden mt-[-30px]"
          priority
        />
      </div>
      <div className="max-w-[1300px] mx-auto w-full sm:px-6 lg:px-0 xl:mt-14 lg:mt-18 xl:px-0 md:py-20 md:pt-0 xl:pt-10 lg:px-20 md:mt-14 lg:mt-20 mt-10  px-4 md:px-8 lg:px-18 xl:px-0 2xl:mt-[80px]">
        {/* Heading */}
        <h2 className="text-[30px] sm:text-3xl md:text-4xl xl:text-[50px] text-[#58585A] font-[700] tracking-wide mb-5 md:mb-8  xl:px-0">
          {heading}
        </h2>
        {/* Lazy loaded Teachers */}
        <div className="xl:px-0">
          <TeachersLazyWrapper onLoaded={(count) => setHasNoTeachers(count === 0)} />
        </div>

      </div>
    </section>
  );
}