import { DashboardDetailsPage } from "@/base/components/layout/dashboard"
import { getServerApi } from "@garage/api/server"
import { VendorActions } from "@/modules/vendors/vendor-actions"
import { VendorProvider } from "@/modules/vendors/vendor-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 response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
    const vendor = response?.data

    const company = vendor?.company_name as string | undefined
    const fullName = [vendor?.first_name, vendor?.last_name].filter(Boolean).join(" ").trim()
    const title = company || fullName || "Vendor Details"
    const isActive = vendor?.is_active ?? vendor?.status === "active"

    return (
        <VendorProvider vendor={{ id, label: title }}>
            <DashboardDetailsPage
                className="p-0 lg:p-0"
                title={title}
                description={vendor?.email ?? vendor?.phone ?? undefined}
                backHref="/purchase/vendor"
                actions={<VendorActions vendorId={id} isActive={Boolean(isActive)} />}
                tabs={[
                    { href: `/purchase/vendor/${id}`, label: "Details" },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </VendorProvider>
    )
}