"use client";

import React from "react";
import Image from "next/image";

import Autoplay from "embla-carousel-autoplay";

import { Button } from "@/components/ui/button";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  type CarouselApi,
} from "@/components/ui/carousel";

import { cn } from "@/lib/utils";
import type { HeroSection } from "@/types/landing-pages.type";

interface ProgramMcuHeroSectionProps {
  hero: HeroSection;
}

const ProgramMcuHeroSection = ({ hero }: ProgramMcuHeroSectionProps) => {
  const [api, setApi] = React.useState<CarouselApi>();
  const [current, setCurrent] = React.useState(0);
  const [count, setCount] = React.useState(0);

  const plugin = React.useRef(
    Autoplay({ delay: 2500, stopOnInteraction: false }),
  );

  React.useEffect(() => {
    if (!api) {
      return;
    }
    setCount(api.scrollSnapList().length);
    setCurrent(api.selectedScrollSnap() + 1);
    api.on("select", () => {
      setCurrent(api.selectedScrollSnap() + 1);
    });
  }, [api]);

  return (
    <section className="bg-background-custom p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col gap-12 items-center justify-center text-center">
          <div className="flex flex-col gap-6">
            <h1 className="font-semibold text-text-sub text-6xl">
              {hero.title || "Medical Check Up"}
            </h1>
            <h3 className="text-2xl text-[#383636CC]">
              {hero.subtitle || "Pemeriksaan kesehatan lengkap, cepat, dan akurat untuk anak hingga dewasa."}
            </h3>
            <div className="flex w-full gap-4">
              <Button
                size="lg"
                className="rounded-full flex-1 font-semibold py-6 px-6 text-lg"
              >
                {hero.primaryCtaLabel || "Reservasi Sekarang"}
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="rounded-full flex-1 font-semibold py-6 px-6 text-lg bg-transparent border-primary border-2 text-primary hover:bg-transparent hover:text-primary"
              >
                {hero.secondaryCtaLabel || "Lihat Layanan"}
              </Button>
            </div>
          </div>
          <Carousel
            plugins={[plugin.current]}
            className="w-full"
            onMouseEnter={plugin.current.stop}
            onMouseLeave={plugin.current.reset}
            setApi={setApi}
          >
            <CarouselContent>
              {Array.from({ length: 4 }).map((_, index) => (
                <CarouselItem key={index}>
                  <div className="aspect-video relative w-7xl h-162 rounded-xl overflow-hidden">
                    <Image
                      src={hero.imageUrl || "/assets/program/hero-mcu.jpg"}
                      alt={hero.title || "MCU Hero"}
                      fill
                      className="object-cover"
                    />

                    <div className="absolute inset-0 bg-linear-to-b from-[#AAE8FF20] to-[#FFFFFF] z-20 opacity-50" />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious className="left-6" />
            <CarouselNext className="right-6" />
            <div className="absolute bottom-6 left-0 right-0">
              <div className="flex gap-2 justify-center">
                {Array.from({ length: count }).map((_, idx) => (
                  <div
                    key={idx}
                    className={cn(
                      "size-3 rounded-full",
                      current === idx + 1 ? "bg-[#5F91FF]" : "bg-white",
                    )}
                  />
                ))}
              </div>
            </div>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export default ProgramMcuHeroSection;