"use client"

import { useState, useEffect } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { useTranslations } from "next-intl"
import Link from "next/link"
import { Link2 } from "lucide-react"


// Sample data for the carousel


export default function BackgroundCarousel({ images }) {
    const [activeIndex, setActiveIndex] = useState(0)
    const [isAutoPlaying, setIsAutoPlaying] = useState(true)

    // Auto-play functionality
    useEffect(() => {
        if (!isAutoPlaying) return

        const interval = setInterval(() => {
            setActiveIndex((prev) => (prev + 1) % images.length)
        }, 5000)

        return () => clearInterval(interval)
    }, [isAutoPlaying])

    // Pause auto-play on hover
    const handleMouseEnter = () => setIsAutoPlaying(false)
    const handleMouseLeave = () => setIsAutoPlaying(true)

    const goToSlide = (index) => {
        setActiveIndex(index)
    }

    const goToPrevSlide = () => {
        setActiveIndex((prev) => (prev - 1 + images.length) % images.length)
    }

    const goToNextSlide = () => {
        setActiveIndex((prev) => (prev + 1) % images.length)
    }
    const t = useTranslations("HomePage.AboutUs")

    return (
        <section
            className="relative h-screen max-h-screen w-full overflow-hidden top-0 text-center"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            {/* Carousel Slides */}
            {images.map((slide, index) => (
                <div
                    key={slide.id}
                    className={`absolute inset-0 h-full w-full transition-opacity duration-1000 ${index === activeIndex ? "opacity-100" : "opacity-0 pointer-events-none"
                        }`}
                >
                    <div className="absolute inset-0 bg-black/60 lg:bg-black/80 z-10" />
                    <img src={slide.image || "/placeholder.svg"} alt={slide.title} className="h-full w-full object-cover" />
                </div>
            ))}
            <div className="absolute inset-0 flex flex-col items-center justify-center text-white z-20">
                <h2 className="text-3xl sm:text-4xl md:text-6xl font-bold mb-4"> {t("brandName")}</h2>
                <p className="text-lg sm:text-xl md:text-2xl max-w-2xl text-center"> {t("description.0")}</p>
            </div>

            {/* Navigation Arrows */}
            <button
                onClick={goToPrevSlide}
                className="absolute left-4 top-1/2 z-30 -translate-y-1/2 rounded-full bg-white/20 p-2 text-white backdrop-blur-sm transition-all hover:bg-white/40"
                aria-label="Previous slide"
            >
                <ChevronLeft className="h-6 w-6" />
            </button>
            <button
                onClick={goToNextSlide}
                className="absolute right-4 top-1/2 z-30 -translate-y-1/2 rounded-full bg-white/20 p-2 text-white backdrop-blur-sm transition-all hover:bg-white/40"
                aria-label="Next slide"
            >
                <ChevronRight className="h-6 w-6" />
            </button>

            {/* Dot Navigation with Stretching Effect */}
            <div className="absolute bottom-20 left-1/2 z-30 flex -translate-x-1/2 items-center gap-2">
                {images.map((slide, index) => (
                    <Link href={slide.link}
                        key={slide.id}
                        onClick={(e) =>{
                            if (index !== activeIndex) {
                                e.preventDefault();
                            }
                            goToSlide(index)
                        }}
                        className={`relative flex h-3  items-center rounded-full bg-white/50 transition-all duration-300 ${index === activeIndex ? "w-auto min-w-3 bg-white p-4" : "w-3 hover:bg-white/70"
                            }`}
                        aria-label={`Go to slide ${index + 1}`}
                    >
                        {index === activeIndex && (
                            <span className="whitespace-nowrap text-xs font-medium text-black transition-opacity duration-300 inline-flex gap-2 items-center">
                                {slide.title}
                                <Link2/>
                            </span>
                        )}
                    </Link>
                ))}
            </div>
        </section>
    )
}

