import { CheckoutBookingInput } from "@/types/home/bookings";
import { DollarSign, Users } from "lucide-react";
import { Separator } from "../ui/separator";
import Price from "./Price";
import { ReactNode } from "react";
import { cn } from "@/lib/utils";



function CheckInOutDetails({ checkIn, checkOut, adults, children }: { checkIn: string, checkOut: string, adults: number, children: number }) {

    const check_in_date = new Date(checkIn).getDate()
    const check_in_day = new Date(checkIn).toLocaleString('default', { month: 'short' })

    const check_out_date = new Date(checkOut).getDate()
    const check_out_day = new Date(checkOut).toLocaleString('default', { month: 'short' })

    const year = new Date(checkIn).getFullYear()

    return <div className="flex items-center justify-between gap-3  border-l-4 border-l-main/40 pl-3">
        {/* Date + Guests */}
        <div className="flex-1 flex items-center gap-3">
            {/* Info */}
            <div className="flex flex-col">
                {/* Dates */}
                <div className="flex items-baseline gap-1 text-neutral-900 text-2xl">
                    <span className="font-semibold">{check_in_date} {check_in_day}</span>
                    <span className="font-semibold">–</span>
                    <span className="font-semibold">{check_out_date} {check_out_day}</span>
                    <span className="text-sm text-neutral-500 ml-1">/ {year}</span>
                </div>

                {/* Guests */}
                <div className="flex items-center gap-2 text-sm text-neutral-600 mt-0.5">
                    <Users size={16} className="text-main" />
                    <span>{adults} Adults · {children} Child</span>
                </div>
            </div>
        </div>
    </div>

}



export default function UiSideDetailsCard({ children, className }: { children: ReactNode, className?: string }) {


    // return <div className="flex-1  bg-white p-6 rounded-lg border border-main/40 space-y-4 shadow-lg h-fit">

    //     {/* <CheckInOutDetails checkIn={booking.check_in} checkOut={booking.check_out} adults={booking.total_adults} children={booking.total_children} /> */}
    //     <Separator />

    //     <div className="space-y-4 transform duration-500 ease-in">
    //         <h2 className="text-base text-neutral-500 font-semibold flex items-center gap-2"><DollarSign className="w-4 h-4" /> Booking Summary  </h2>

    //         <div className="text-sm space-y-2">

    //             {/* {
    //                 booking.rooms.map((room, index) => <div key={index} className="flex justify-between border-b-2 border-dashed pb-2">
    //                     <span>Room 0{index + 1}</span>
    //                     <span><Price value={room.room_total} /></span>
    //                 </div>)
    //             } */}


    //             {/* <div className="flex justify-between border-b-2 border-dashed pb-2">
    //                 <span>Global Add-ons</span>
    //                 <span>LKR 23,000</span>
    //             </div> */}

    //             {/* <div className="flex text-green-600 justify-between border-b-2 border-dashed pb-2">
    //                 <span>Discount (2%)</span>
    //                 <span>LKR 2,000</span>
    //             </div>

    //             <div className="pt-2 flex justify-between font-semibold text-lg">
    //                 <span>Total</span>
    //                 <span>LKR {booking.total_price.toLocaleString()}</span>
    //             </div> */}

    //         </div>
    //     </div>


    //     {/* STICKY ACTION */}
    //     <div className="flex items-center justify-between pt-4 border-t">

    //         <div>
    //             <p className="text-xs text-neutral-500">Total Price</p>
    //             <h2 className="text-xl font-bold text-neutral-900">
    //                 {/* <span><Price value={booking.total_price} /></span> */}
    //                 <span className="text-sm font-normal text-neutral-500"> / booking</span>
    //             </h2>
    //         </div>

    //         <button onClick={onClick} className="flex items-center gap-2 py-2 px-6 bg-main ring-4 ring-main/20 text-white text-lg font-semibold rounded-full hover:scale-102 active:scale-98 transition ">  Checkout </button>

    //     </div>



    //     {/* <button onClick={onClick} className="w-full bg-main text-white py-3 rounded-lg font-semibold hover:opacity-90 transition ring-4 ring-main/20">Checkout</button> */}

    // </div>

    return <div className={cn('flex-1  sm:bg-white p-4 sm:p-6 rounded-lg sm:border border-main/40 space-y-2 shadow-lg h-fit w-full', className)}>

        {children}

    </div>

}
