import { DashboardDetailsPage } from "@/base/components/layout/dashboard"
import { AppointmentActions } from "@/modules/appointments/appointment-actions"
import { AppointmentProvider } from "@/modules/appointments/appointment-context"
import { CalendarCheck2 } from "lucide-react"
import React from "react"

export default async function layout(props: {
    params: Promise<{ id: string }>
    children: React.ReactNode
}) {
    const { id } = await props.params

    return (
        <AppointmentProvider appointment={{ id, label: `Appointment #${id}` }}>
            <DashboardDetailsPage
                className="p-0 lg:p-0"
                icon={<CalendarCheck2 className="size-5" />}
                title={`Appointment #${id}`}
                backHref="/calendar/appointment/list"
                actions={<AppointmentActions appointmentId={id} />}
                tabs={[
                    { href: `/calendar/appointment/${id}`, label: "Details" },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </AppointmentProvider>
    )
}