import { ArrowRightCircle, CarFront, BedDouble, HandCoins, Utensils, ChevronDown, CalendarDays, Key, MapPin, Mail, Facebook, Instagram, Twitter, Linkedin, Menu } from "lucide-react";
import { Button } from "../../ui/button";
import { Link, router } from "@inertiajs/react";
import Header from "@/components/app-mobile/Header";
import { useEffect, useState } from "react";
import { addDays, format } from "date-fns";
import { PopoverTrigger, PopoverContent, Popover } from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import ButtonUi from "../ButtonUI";
import { InlineFindRoom } from "./SearchRoom";
import BookingKeyCart from "./BookingKeyCart";

const SocialMediaIcons = () => {
    return <div className="absolute right-10 top-0 bottom-0  flex flex-col justify-center items-end w-fit gap-4">
        <div className="bg-black/90 rounded-full p-2 border border-main "> <Facebook className="text-white  w-5 h-5" />  </div>
        <div className="bg-black/90 rounded-full p-2 border border-main "> <Instagram className="text-white w-5 h-5" />  </div>
        <div className="bg-black/90 rounded-full p-2 border border-main "> <Twitter className="text-white  w-5 h-5" />  </div>
        <div className="bg-black/90 rounded-full p-2 border border-main "> <Linkedin className="text-white  w-5 h-5" />  </div>
    </div>
}


export default function Hero() {
    return <div className='relative bg-black w-full h-[48vh] md:h-screen rounded-b-2xl  md:rounded-none '>
        {/* Title */}
        <Header title="home" home />

        {/* <div className='absolute top-0 bottom-0 left-0 right-0 rounded-b-2xl    mask-b-from-70% md:mask-b-from-80% mask-b-to-100%  bg-[url(/images/paddy-field.jpeg)] bg-cover bg-no-repeat bg-center' /> */}
        {/* <div className='absolute top-0 bottom-0 left-0 right-0 rounded-b-2xl  bg-[url(/images/paddy-field.jpeg)] bg-cover bg-no-repeat bg-center' /> */}

        <div className='absolute top-0 bottom-0 left-0 right-0 rounded-b-2xl mask-t-from-75% mask-t-to-100%    bg-[url(/images/hotel/caption.jpg)] bg-cover bg-no-repeat bg-center' />

        {/* Chenge To Video When need */}
        {/* <div className="relative h-full overflow-hidden rounded-b-2xl mask-t-from-80%  mask-t-to-100%  ">
            <video
                className="absolute inset-0 w-full h-full object-cover"
                autoPlay
                muted
                loop
                playsInline
            >
                <source src="/videos/hotel.mp4" type="video/mp4" />
            </video>

            <div className="absolute inset-0 bg-black/30" />
        </div> */}


        {/* <div className='absolute top-0 bottom-0 left-0 right-0 backdrop-brightness-70' /> */}
        <div className='absolute aspect-auto h-16 sm:h-30 -bottom-5 left-0 right-0 bg-[url(/images/design/bottom-shape2.png)] bg-cover bg-no-repeat bg-center' />

        <div className="sm:hidden mx-auto pt-4 md:pt-10 max-w-300 px-4 ">
            <div className="flex justify-between items-start relative text-sm font-p px-0">
                <Link href="/dashboard" className="relative rounded-full border backdrop-blur p-2 border-main/40 ">
                    <Menu size={20} className="text-main" />
                </Link>
                <div className=" text-center">
                    <h1 className="text-3xl lg:text-5xl tracking-wider font-black font-serif text-main text-shadow-xs text-shadow-black/80">
                        Haven
                    </h1>
                    <p className="lg:text-2xl font-marck tracking-wider text-white/80">
                        Welcome to Haven Resort!
                    </p>
                </div>
                <BookingKeyCart />
            </div>
        </div>

        {/* Side vertical text */}

        {/* <div className="absolute left-10 top-0 bottom-0 transform translate-y-5/6  text-white px-2 py-1 z-50 ">

            <div className="flex items-center gap-4 -rotate-90 origin-left">
                <div className="flex items-center ">
                    <MapPin className="text-main mr-2 w-5 h-5" />
                    <p className="whitespace-nowrap">Tuesday - Saturday 8:00 AM - 11:00 PM</p>
                </div>
                <div className="flex items-center">
                    <Mail className="text-main mr-2 w-5 h-5" />
                    <p className="whitespace-nowrap">haven@hotel.com</p>
                </div>

            </div>
        </div> */}

        <SocialMediaIcons />


        {/* Inline Type */}
        <InlineFindRoom />

        {/* Side Box Type */}
        {/* <SideBoxFindRoom /> */}

        {/* TODO Remove */}
        {/* <div className='md:hidden absolute bottom-0 left-0 p-4 space-y-2  py-14 bg-linear-to-t from-main-bg/40 via-black/40 to-black/0 w-full text-white '>
            <h1 className='text-3xl font-black'>Jungle Villa</h1>
            <p className='text-sm text-gray-100'>Relax Among Rice Fileds</p>
            <Button className='rounded-full bg-main   text-white'>View Details <ArrowRightCircle /></Button>
        </div> */}
    </div>
}
