import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { InspectionActions } from '@/modules/inspections/inspection-actions'
import { InspectionProvider } from '@/modules/inspections/inspection-context'
import React from 'react'

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

    const title = inspection.data?.title || 'Inspection Details'
    const orderNumber = inspection.data?.order_number
    const status = inspection.data?.status

    return (
        <InspectionProvider inspection={{ id, label: title }}>
            <DashboardDetailsPage
                className="p-0 lg:p-0"
                title={title}
                description={orderNumber ? `Order: ${orderNumber}` : undefined}
                backHref="/sales/inspections"
                actions={<InspectionActions inspectionId={id} status={status} />}
                tabs={[
                    {
                        href: `/sales/inspections/${id}`,
                        label: 'Details',
                    },
                    {
                        href: `/sales/inspections/${id}/checkpoints`,
                        label: 'Checkpoints',
                    },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </InspectionProvider>
    )
}