"use client";
import { cn } from "@/lib/utils";
import React, { useState, useEffect, useCallback } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";

type CarModel = {
  id: string;
  name: string;
  description: string;
  specs: {
    engine: string;
    power: string;
    acceleration: string;
    topSpeed: string;
  };
  images: {
    primary: string;
    secondary: string;
  };
};

const CAR_DATA: CarModel[] = [
  {
    id: "sf90",
    name: "SF90 Stradale",
    description:
      "The SF90 Stradale is the first series production PHEV (Plug-in Hybrid Electric Vehicle) from Ferrari, marking a new chapter in the marque's history.",
    specs: {
      engine: "V8 turbo + 3 electric motors",
      power: "1000 cv",
      acceleration: "0-100 km/h in 2.5s",
      topSpeed: "340 km/h",
    },
    images: {
      primary: "/images/cars/sf90-front.png",
      secondary: "/images/cars/sf90-rear.png",
    },
  },
  {
    id: "roma",
    name: "Ferrari Roma",
    description:
      "The Ferrari Roma features a refined proprtions and timeless design combined with unparalleled performance and handling.",
    specs: {
      engine: "V8 turbo",
      power: "620 cv",
      acceleration: "0-100 km/h in 3.4s",
      topSpeed: "320 km/h",
    },
    images: {
      primary: "/images/cars/roma-side.png",
      secondary: "/images/cars/roma-interior.png",
    },
  },
  {
    id: "f8",
    name: "F8 Tributo",
    description:
      "The F8 Tributo is the new mid-rear-engined sports car that represents the highest expression of the Prancing Horse's classic two-seater berlinetta.",
    specs: {
      engine: "V8 turbo",
      power: "720 cv",
      acceleration: "0-100 km/h in 2.9s",
      topSpeed: "340 km/h",
    },
    images: {
      primary: "/images/cars/f8-front.png",
      secondary: "/images/cars/f8-action.png",
    },
  },
  {
    id: "812",
    name: "812 Superfast",
    description:
      "The 812 Superfast aims to offer drivers the most powerful and exhilarating Ferrari V12 ever built.",
    specs: {
      engine: "V12",
      power: "800 cv",
      acceleration: "0-100 km/h in 2.9s",
      topSpeed: "340 km/h",
    },
    images: {
      primary: "/images/cars/812-front.png",
      secondary: "/images/cars/812-rear.png",
    },
  },
  {
    id: "portofino",
    name: "Portofino M",
    description:
      "The Ferrari Portofino M, which features the legendary 'M' suffix for Modificata, is the evolution of the Ferrari Portofino.",
    specs: {
      engine: "V8 turbo",
      power: "620 cv",
      acceleration: "0-100 km/h in 3.45s",
      topSpeed: "320 km/h",
    },
    images: {
      primary: "/images/cars/portofino-open.png",
      secondary: "/images/cars/portofino-closed.png",
    },
  },
];

const StatusCarousel = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const DURATION = 3000; // 3 seconds per slide

  const handleNext = useCallback(() => {
    setActiveIndex((prev) => (prev + 1) % CAR_DATA.length);
  }, []);

  const handlePrev = useCallback(() => {
    setActiveIndex((prev) => (prev - 1 + CAR_DATA.length) % CAR_DATA.length);
  }, []);

  // Auto-advance
  useEffect(() => {
    const timer = setInterval(handleNext, DURATION);
    return () => clearInterval(timer);
  }, [handleNext, activeIndex]); // Reset timer on index change

  // Keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "ArrowRight") handleNext();
      if (e.key === "ArrowLeft") handlePrev();
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [handleNext, handlePrev]);

  const car = CAR_DATA[activeIndex];

  return (
    <section
      className={cn(
        "overflow-hidden bg-zinc-50 px-4 py-20 md:px-8 dark:bg-zinc-950",
      )}
    >
      <div className="mx-auto flex max-w-7xl flex-col gap-8">
        {/* Progress Bars */}
        <div className={cn("z-20 mx-auto flex w-full max-w-[500px] gap-2")}>
          {CAR_DATA.map((_, index) => (
            <button
              key={index}
              onClick={() => setActiveIndex(index)}
              className={cn(
                "h-1 flex-1 cursor-pointer overflow-hidden rounded-full bg-zinc-200 transition-all hover:h-1.5 dark:bg-zinc-800",
              )}
            >
              <div
                className={cn(
                  "h-full rounded-full bg-zinc-800 dark:bg-zinc-200",
                  index < activeIndex && "w-full",
                  index > activeIndex && "w-0",
                )}
              >
                {index === activeIndex && (
                  <div
                    className={cn(
                      "relative h-2 w-full overflow-hidden rounded-full bg-zinc-700",
                    )}
                  >
                    <motion.div
                      initial={{ scaleX: 0 }}
                      animate={{ scaleX: 1 }}
                      transition={{
                        duration: DURATION / 1000,
                        ease: "easeInOut",
                      }}
                      className={cn("absolute inset-0 origin-left bg-zinc-200")}
                    />
                  </div>
                )}
              </div>
            </button>
          ))}
        </div>

        {/* Carousel Content */}
        <div
          className={cn(
            "relative flex min-h-[700px] items-center justify-center",
          )}
        >
          <motion.div
            key={car.id}
            initial={{ opacity: 0, x: 20, filter: "blur(10px)" }}
            animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
            exit={{ opacity: 0, x: -20, filter: "blur(10px)" }}
            transition={{ duration: 0.6, ease: "easeInOut" }}
            className={cn(
              "relative flex min-h-[700px] w-full items-center justify-center py-10",
            )}
          >
            {/* Background Image Layer */}
            <div
              className={cn(
                "absolute top-1/2 left-1/2 z-0 h-[700px] w-[900px] -translate-x-1/2 -translate-y-1/2",
              )}
            >
              <div
                className={cn(
                  "relative h-full w-full overflow-hidden opacity-50 dark:opacity-30",
                )}
              >
                <Image
                  src={car.images.secondary}
                  alt={`${car.name} background`}
                  fill
                  className={cn("object-cover transition-all duration-700")}
                />
              </div>
            </div>

            {/* Foreground Card */}
            <motion.div
              initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
              animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
              exit={{ opacity: 0, y: -20, filter: "blur(10px)" }}
              transition={{ duration: 0.6, ease: "easeInOut" }}
              className={cn(
                "group relative z-10 h-[600px] w-full max-w-[500px] overflow-hidden shadow-2xl",
              )}
            >
              <Image
                src={car.images.primary}
                alt={`${car.name} primary view`}
                fill
                className={cn(
                  "object-cover transition-transform duration-700 group-hover:scale-105",
                )}
              />
              {/* Overlay */}
              <div
                className={cn(
                  "absolute inset-0 bg-linear-to-t from-black/90 via-black/40 to-transparent",
                )}
              />

              <div className={cn("absolute bottom-0 left-0 w-full p-8")}>
                <h2 className={cn("mb-8 text-3xl font-bold text-white")}>
                  {car.name}
                </h2>

                <div className={cn("grid grid-cols-2 gap-6")}>
                  <div>
                    <span
                      className={cn(
                        "mb-1 block text-xs font-medium tracking-wider text-zinc-400 uppercase",
                      )}
                    >
                      Engine
                    </span>
                    <span
                      className={cn("block text-base font-semibold text-white")}
                    >
                      {car.specs.engine}
                    </span>
                  </div>
                  <div>
                    <span
                      className={cn(
                        "mb-1 block text-xs font-medium tracking-wider text-zinc-400 uppercase",
                      )}
                    >
                      Power
                    </span>
                    <span
                      className={cn("block text-base font-semibold text-white")}
                    >
                      {car.specs.power}
                    </span>
                  </div>
                  <div>
                    <span
                      className={cn(
                        "mb-1 block text-xs font-medium tracking-wider text-zinc-400 uppercase",
                      )}
                    >
                      0-100 km/h
                    </span>
                    <span
                      className={cn("block text-base font-semibold text-white")}
                    >
                      {car.specs.acceleration}
                    </span>
                  </div>
                  <div>
                    <span
                      className={cn(
                        "mb-1 block text-xs font-medium tracking-wider text-zinc-400 uppercase",
                      )}
                    >
                      Top Speed
                    </span>
                    <span
                      className={cn("block text-base font-semibold text-white")}
                    >
                      {car.specs.topSpeed}
                    </span>
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default StatusCarousel;
Status Carousel

SF90 Stradale
