import PageLayout from "@/layouts/home/page-layout";
import { Link } from "@inertiajs/react";


export default function BookingView({ bookingData }: { bookingData: any }) {

    const { reference, check_in, check_out, total_adults, total_children, total_price, guest, rooms } = bookingData;


    return (<PageLayout title="Booking">
        <div className="max-w-300 mx-auto py-10 mb-14 px-4 space-y-6 min-h-screen">

            <h1 className="text-2xl font-bold mb-4">Booking Details</h1>
            <p><strong>Reference:</strong> {reference}</p>
            <p><strong>Guest:</strong> {guest.first_name} {guest.last_name}</p>
            <p><strong>Email:</strong> {guest.email}</p>
            <p><strong>Phone:</strong> {guest.phone}</p>
            <p><strong>Check-in:</strong> {check_in}</p>
            <p><strong>Check-out:</strong> {check_out}</p>
            <p><strong>Adults:</strong> {total_adults}</p>
            <p><strong>Children:</strong> {total_children}</p>
            <p><strong>Total Price:</strong> {total_price}</p>

            <h2 className="mt-6 text-xl font-semibold">Rooms</h2>
            {rooms.map((room: any) => (
                <div key={room.id} className="border p-4 rounded my-2">
                    <p><strong>Room:</strong> {room.room_title}</p>
                    <p><strong>Room Number:</strong> {room.room_number}</p>
                    <p><strong>Adults:</strong> {room.adults}</p>
                    <p><strong>Children:</strong> {room.children}</p>
                    <p><strong>Room Total:</strong> {room.room_total}</p>
                </div>
            ))}

            <div className="mt-6">
                <Link href="/" className="text-blue-500 underline">Back to Home</Link>
            </div>
        </div>
    </PageLayout>
    );
}