jaecoo-cihampelas/components/landing-page/header.tsx

"use client";

import Image from "next/image";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import Link from "next/link";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";
import { useEffect, useState } from "react";
import Autoplay from "embla-carousel-autoplay"; // ✅ Import plugin autoplay
import { useRef } from "react";
import { getBannerData } from "@/service/banner";

const heroImages = [
  "/Hero.png",
  // "/Carousell-01.png",
  "/Carousell-02.png",
  "/Carousell-03.png",
  "/Carousell-04.png",
  "/Carousell-05.png",
];
type Banner = {
  id: number;
  title: string;
  description: string;
  status_id: number;
  position: string;
  thumbnail_url: string;
  created_at: string;
};

export default function Header() {
  const [open, setOpen] = useState(false);
  const [banners, setBanners] = useState<Banner[]>([]);

  useEffect(() => {
    const fetchBanners = async () => {
      try {
        const req = {
          limit: "10",
          page: 1,
          search: "",
        };

        const res = await getBannerData(req);

        const bannerData: Banner[] = res?.data?.data || [];

        const activeBanners = bannerData
          .filter((banner) => banner.status_id === 2) // ✅ approved only
          .sort((a, b) => {
            const posA = Number(a.position);
            const posB = Number(b.position);

            if (posA !== posB) return posA - posB;

            return (
              new Date(b.created_at).getTime() -
              new Date(a.created_at).getTime()
            );
          });

        setBanners(activeBanners);
      } catch (err) {
        console.error("Failed to fetch banners:", err);
      }
    };

    fetchBanners();
  }, []);

  const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: false }));

  return (
    <section className="relative w-full overflow-hidden bg-white">
      <Carousel className="w-full relative" plugins={[plugin.current]}>
        <CarouselContent>
          {banners.map((banner, index) => (
            <CarouselItem key={banner.id}>
              <div className="relative w-full h-[400px] sm:h-[500px] md:h-[810px]">
                <Image
                  src={banner.thumbnail_url}
                  alt={banner.title}
                  fill
                  priority={index === 0}
                  className="object-cover"
                />

                {/* {index === 0 && (
                  <div className="absolute inset-0 flex flex-col justify-center items-start px-4 sm:px-8 md:px-28 z-10">
                    <motion.h1
                      initial={{ opacity: 0, y: 40 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.8 }}
                      className="text-2xl sm:text-3xl md:text-5xl font-bold text-black mb-4"
                    >
                      {banner.title}
                    </motion.h1>

                    {banner.description && (
                      <motion.p
                        initial={{ opacity: 0, y: 40 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.9, delay: 0.2 }}
                        className="text-sm sm:text-base md:text-lg text-black mb-6"
                      >
                        {banner.description}
                      </motion.p>
                    )}

                  
                  </div>
                )} */}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </section>
  );
}