import { Button } from "@/components/ui/button";
import ButtonUi from "../../ButtonUI";
import SectionTitle from "../../SectionTitle";
import { Users, AirVentIcon, Tv2, ChevronRight, CircleChevronRight } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import { RoomCategory } from "@/types/home/home-sections";
import Price from "../../Price";
import Icon, { ImageIcon } from "@/components/core/Icon";
import { RoomImageCarousel } from "../../ImageCarousel";


function Room({ data }: { data: RoomCategory }) {


    const { short_name, name, max_adults, max_children, description, facilities, base_price, rooms, slug } = data


    return <div className=' snap-start  shrink-0 scroll-ml-5  w-[85%] sm:w-[45%] lg:w-[30%] 2xl:w-[28%] max-w-110 border-4 border-main/20 rounded-sm bg-black/60  hover:border-main/30 transform duration-300 ease-in flex flex-col'>
        <RoomImageCarousel images={rooms} discount={`${rooms.length} Rooms`} />
        <div className='h-full p-3 sm:p-4 sm:gap-4 flex flex-col justify-between text-white'>
            <div className="flex-1" >
                <div className='border-l-4 sm:mb-2 pl-2 border-main'>
                    <div className='flex gap-4 justify-between items-start'>
                        <h1 className='text-xs sm:text-sm  text-neutral-300'>{short_name}</h1>
                        <div className='flex items-center justify-center gap-2 text-xs  w-fit  whitespace-nowrap'><Users className='text-main w-4 h-4' /> {max_adults} Guest</div>
                    </div>
                    <h1 className='text-lg  sm:text-2xl font-semibold'>{name}</h1>
                </div>
                <p className='hidden sm:block  font-p text-sm text-neutral-300'>{description}</p>
                <div className='hidden sm:flex gap-4  mt-4'>
                    {facilities.map((item, index) => <div key={index} className='flex items-center justify-center gap-2 text-xs border rounded-full border-main/40 bg-main/5 py-1.5 px-2 w-fit'><ImageIcon is_icon={item.is_icon} value={item.icon_value} className='text-main w-4 h-4' />{item.name}</div>)}
                </div>
            </div>
            <div className='flex justify-between items-end mt-2'>
                <h1 className='text-xl sm:text-2xl font-bold'><Price value={base_price} /> <span className='text-sm font-normal text-neutral-300'>/ night</span></h1>
                <ButtonUi href={`all-rooms/${slug}`} className="bg-transparent hover:bg-main">Seem More</ButtonUi>
            </div>
        </div>
    </div>
}


export default function Rooms({ data }: { data: RoomCategory[] }) {


    return <section className="  relative  bg-[url(/images/design/explore-bg.png)] bg-cover bg-no-repeat bg-center">

        <div className="ltr py-6 sm:py-14  gap-6 w-full flex flex-col items-center ">
            <SectionTitle subtitle='Rooms' title='Reste’s Rooms & Suites' classNameTitle='text-white' sideChildren={<ButtonUi href="/rooms" className="hidden sm:block bg-transparent ring-0 mb-1 "><div className=" flex gap-4 items-center">See All Rooms <ChevronRight className="w-5 h-5" /></div></ButtonUi>} />

            <div className="max-w-300 2xl:max-w-340  w-full space-y-4 sm:space-y-6 sm:mb-2">
                <Separator className="w-full bg-neutral-500" />

                {/* <div className="hidden sm:flex justify-center gap-2 sm:gap-10 text-white text-sm tracking-widest uppercase">
                    {
                        data.map((item, index) => <button key={index} className={`relative text-xs sm:text-base pb-2 px-3  ${index === 10 && 'rounded-bl-sm border-b-2 border-l-2 border-main '}  transition-all duration-200`}>{item.short_name}</button>)
                    }
                </div> */}
            </div>

            {/* <div className='flex px-4 sm:px-6 gap-4 w-full overflow-x-auto z-1 no-scrollbar snap-x'> */}
            <div className={` flex gap-4 px-4 sm:px-6 w-full overflow-x-auto no-scrollbar snap-x ${data.length <= 3 ? 'justify-center' : 'justify-start'} `}>
                {
                    data.map(item => <Room key={item.id} data={item} />)
                }
            </div>
        </div>
    </section>
}