// import { Head, usePage } from '@inertiajs/react';
// import AppLayout from '@/layouts/app-layout';
// import IndexPageLayout from '@/components/core/IndexPageLayout';
// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
// import { Card, CardContent } from '@/components/ui/card';
// import { TablePagination } from '@/components/core/TablePagination';
// import { Badge } from '@/components/ui/badge';

// type PaginationLinkType = {
//     url: string | null
//     label: string
//     active: boolean
// }

// interface BookingType {
//     id: number
//     reference: string
//     check_in: string
//     check_out: string
//     total_price: number
//     base_currency: string
//     payment_option: 'pay_now' | 'pay_at_hotel'
//     status: 'pending' | 'confirmed' | 'cancelled'
//     created_at: string
//     guest: {
//         first_name: string
//         last_name: string
//         email: string
//     }
// }

// interface BookingsPageProps {
//     bookings: {
//         data: BookingType[],
//         links: PaginationLinkType[],
//         current_page: number
//         last_page: number
//         per_page: number
//         total: number
//         path: string
//     }
// }


import { Head } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import { useState } from 'react';
import BookingDetails from './BookingDetails';
import BookingTable from './BookingTable';
import IndexPageLayout from "@/components/core/IndexPageLayout";

export default function Index() {

    const [selected, setSelected] = useState();

    return (
        <AppLayout breadcrumbs={[{ title: 'Booking Records', href: '/dashboard/bookings' }]}>

            <Head title="Booking Records" />


            <IndexPageLayout title="Bookings" add path="/dashboard/bookings" description="Bookings Recorder Dashboard for managing hotel reservations, guest details, stay dates, payments, and booking status in one fast operational view." >


                <div className="flex justify-start items-start gap-4">

                    {/* ---------------- LEFT LIST ---------------- */}
                    <BookingTable selected={selected} setSelected={setSelected} />

                    {/* ---------------- RIGHT RECORD VIEW ---------------- */}

                    <BookingDetails booking={selected} />
                </div>
            </IndexPageLayout>

        </AppLayout>
    );
}