import * as React from "react"
import { Card, CardContent } from "@/components/ui/card"
import {
    Carousel,
    CarouselContent,
    CarouselItem,
} from "@/components/ui/carousel"
import Autoplay from "embla-carousel-autoplay"
import { cn } from "@/lib/utils"
import { ImageType } from "@/types/home/image"

interface RoomCarouselProps {
    images: ImageType[] // array of image URLs
    discount?: string // optional discount text like '20% OFF'
    className?: string
    classNameImage?: string
    classNameCard?: string
}

export function RoomImageCarousel({ images, discount, className, classNameImage, classNameCard }: RoomCarouselProps) {
    const plugin = React.useRef(
        Autoplay({ delay: 3000, stopOnInteraction: true })
    )


    const _images = (images.length > 0 && images[0].url) ? images : [{
        url: '/images/placeholders/room-placeholder.jpg',
        alt_text: 'Room plaseholder image'
    }]
    console.log(_images, images);


    return (
        <Carousel
            plugins={[plugin.current]}
            className={cn("w-full max-w-full", className)}
            onMouseEnter={plugin.current.stop}
            onMouseLeave={plugin.current.reset}
        >
            <CarouselContent className="gap-4">
                {_images.map((img, index) => img.url ? <CarouselItem key={index}>
                    <Card className={cn("overflow-hidden rounded-none rounded-t-sm p-0 border-none", classNameCard)}>
                        <CardContent className={cn("relative p-0 aspect-5/3", classNameImage)}>

                            <div className="absolute inset-0 bg-cover bg-center bg-no-repeat" style={{ backgroundImage: `url(${img.url})` }} />

                            {discount && (
                                <span className="absolute top-2 right-2 bg-main/85 text-white text-xs font-semibold py-1 px-2 rounded-sm">   {discount}  </span>
                            )}

                            <div className="absolute inset-0 flex items-end p-2" />
                        </CardContent>
                    </Card>
                </CarouselItem> : null)}
            </CarouselContent>
        </Carousel>
    )
}