"use client";

import Image from "next/image";
import React, { useState, useEffect } from "react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Card, CardContent } from "@/components/ui/card";
import Autoplay from "embla-carousel-autoplay";
import Link from "next/link";
import { ArrowRight } from "lucide-react";

const Hero = () => {
  const plugin = React.useRef(
    Autoplay({ delay: 4000, stopOnInteraction: true })
  );

  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };

    checkMobile();
    window.addEventListener("resize", checkMobile);

    return () => window.removeEventListener("resize", checkMobile);
  }, []);

  const heroData = [
    {
      type: "image",
      src: "/rudraksh banner image 2.avif",
      overlay: {
        title: "Sacred Collection",
        subtitle: "Discover Authentic Rudraksha",
        description: "Explore our curated selection of premium spiritual items",
        link: "/collection",
      },
    },
    {
      type: "image",
      src: "/rudraksha banner 1.png",
      overlay: {
        title: "Quality Assured",
        subtitle: "Lifetime Authenticity Guarantee",
        description: "Every piece comes with our exclusive certification",
        link: "/products/premium-rudraksha-consultation-astrology",
      },
    },
    {
      type: "image",
      src: "/rudraksha banner 2.png",
      overlay: {
        title: "Sacred Ceremonies",
        subtitle: "Traditional Prana Pratistha",
        description: "Blessed at the ancient Pashupatinath temple",
        link: "/collection/online-pooja",
      },
    },
  ];

  return (
    <div className="relative w-full h-[55vh] bg-background">
      <Carousel
        plugins={[plugin.current]}
        className="w-full h-full"
        onMouseEnter={plugin.current.stop}
        onMouseLeave={plugin.current.reset}
      >
        <CarouselContent>
          {heroData.map((item, index) => (
            <CarouselItem key={index}>
              <div className="relative w-full h-[55vh] overflow-hidden">
                <Image
                  src={item.src || "/placeholder.svg"}
                  alt={`Slide ${index + 1}`}
                  fill
                  className="object-cover brightness-75"
                  priority={index === 0}
                />

              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className="left-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-none" />
        <CarouselNext className="right-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-none" />
      </Carousel>
    </div>
  );
};

export default Hero;