import BookingKeyCart from "@/components/(public)/home/BookingKeyCart";
import { ImageType } from "@/types/home/image";
import { Link } from "@inertiajs/react";
import { ArrowLeftIcon, Send } from "lucide-react";
import { useEffect, useState } from "react";


export default function MobilleRoomHero({ images, short_name, name }: { images: ImageType[], short_name?: string, name: string }) {

    const [index, setIndex] = useState(0);

    const visible = [
        images[index % images.length],
        images[(index + 1) % images.length],
        images[(index + 2) % images.length],
    ];

    useEffect(() => {
        const timer = setInterval(() => {
            setIndex((i) => (i + 1) % images.length);
        }, 4000);

        return () => clearInterval(timer);
    }, [images.length]);

    if (images.length <= 0) return

    return (
        <div className="sm:hidden relative w-full h-[50vh]">

            {/* Main Image */}
            <img
                src={visible[0].url}
                alt={visible[0].alt_text}
                className="w-full h-full object-cover rounded-b-2xl"
            />

            {/* <div className="absolute top-0 left-0 right-0 flex items-center justify-between px-4 py-3 ">

               <button className="text-white text-lg">  ←  </button>

                <h1 className="text-white text-lg font-semibold text-center"> {name}  </h1>

                <button className="text-white text-lg">  🛒  </button>
            </div> */}
            <div className="h-16 left-0 right-0 pb-10 bg-linear-to-b from-black/20 via-black/20 to-transparent absolute top-0" />

            <div className="z-10 absolute top-0 left-0 right-0 flex gap-8    items-center justify-between p-4 ">
                <Link href="/dashboard" className="relative rounded-full border backdrop-blur-xs p-2 border-main/40 bg-white/90 ">
                    <ArrowLeftIcon size={20} className="text-main" />
                </Link>
                <h1 className="text-2xl tracking-wider font-black font-serif text-white absolute left-1/2 -translate-x-1/2  text-center"> Haven </h1>
                <div className="flex gap-2">
                    <BookingKeyCart />
                    <Link href="/dashboard" className="relative rounded-full flex justify-center items-center border backdrop-blur-xs p-2 border-main/40 bg-white/90 ">
                        <Send size={20} className="text-main" />
                    </Link>
                </div>
            </div>



            {/* Bottom Gradient + Content */}
            <div className="absolute -bottom-1 left-0 right-0 px-4 py-2  bg-linear-to-t from-white via-white/80 to-transparent  ">

                {/* Image Thumbnails */}
                <div className="grid grid-cols-3 gap-3">
                    {images.slice(1, 4).map((img, index) => (
                        <img
                            key={index}
                            src={img.url}
                            alt={img.alt_text}
                            className="h-16 w-full object-cover rounded-md shadow-sm"
                        />
                    ))}
                </div>

                <p className='text-main font-bold font-gilda mt-4'>{short_name?.toLocaleUpperCase()}</p>
                <h1 className='text-black text-4xl font-bold font-gilda'>{name}</h1>


            </div>


            {/* Bottom Shape */}
            {/* <div className="absolute w-full h-14 -bottom-1 left-0 right-0 bg-[url(/images/design/bottom-shape2.png)] bg-cover bg-no-repeat bg-center" /> */}

        </div>
    );
}