import { Star } from "lucide-react";

interface BookingCardProps {
    price: number;
    rating: number;
    reviewCount: number;
}

export function BookingCard({ price, rating, reviewCount }: BookingCardProps) {
    return (
        <div className="relative">
            <div className="sticky top-24 border-2 border-black p-6 bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
                <div className="flex items-end justify-between mb-6">
                    <div>
                        <span className="text-2xl font-bold">₨{price.toLocaleString()}</span>
                        <span className="text-gray-600"> / night</span>
                    </div>
                    <div className="flex items-center gap-1 text-sm font-medium">
                        <Star className="w-4 h-4 fill-black" />
                        {rating} · <span className="text-gray-500 underline">{reviewCount} reviews</span>
                    </div>
                </div>

                <div className="border-2 border-black mb-4">
                    <div className="grid grid-cols-2 border-b-2 border-black">
                        <div className="p-3 border-r-2 border-black">
                            <label className="block text-xs font-bold uppercase tracking-wider mb-1">Check-in</label>
                            <input type="date" className="w-full outline-none text-sm bg-transparent" />
                        </div>
                        <div className="p-3">
                            <label className="block text-xs font-bold uppercase tracking-wider mb-1">Check-out</label>
                            <input type="date" className="w-full outline-none text-sm bg-transparent" />
                        </div>
                    </div>
                    <div className="p-3">
                        <label className="block text-xs font-bold uppercase tracking-wider mb-1">Guests</label>
                        <select className="w-full outline-none text-sm bg-transparent">
                            <option>1 guest</option>
                            <option>2 guests</option>
                            <option>3 guests</option>
                        </select>
                    </div>
                </div>

                <button className="w-full py-4 bg-black text-white font-medium text-lg hover:bg-[#E7FE78] hover:text-black border-2 border-black transition-all duration-300 mb-4">
                    Reserve
                </button>

                <p className="text-center text-sm text-gray-500 mb-4">You won't be charged yet</p>

                <div className="space-y-3 text-sm">
                    <div className="flex justify-between">
                        <span className="underline">₨{price.toLocaleString()} x 5 nights</span>
                        <span>₨{(price * 5).toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between">
                        <span className="underline">Cleaning fee</span>
                        <span>₨5,000</span>
                    </div>
                    <div className="flex justify-between">
                        <span className="underline">Service fee</span>
                        <span>₨8,000</span>
                    </div>
                    <div className="pt-4 border-t-2 border-gray-100 flex justify-between font-bold text-lg">
                        <span>Total</span>
                        <span>₨{(price * 5 + 13000).toLocaleString()}</span>
                    </div>
                </div>
            </div>
        </div>
    );
}
