import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { ExpenseActions } from '@/modules/expenses/expense-actions'
import { ExpenseProvider, type ExpenseContextValue } from '@/modules/expenses/expense-context'
import { ReceiptIcon } from 'lucide-react'
import React from 'react'

export default async function ExpenseDetailLayout(props: {
    params: Promise<{ id: string }>
    children: React.ReactNode
}) {
    const { id } = await props.params
    const api = await getServerApi()
    const expense = await api.expenses.getById(id)
    const data = expense.data as ExpenseContextValue
    const title = data?.title || data?.invoice_number || 'Expense Details'
    
    return (
        <ExpenseProvider expense={data}>
            <DashboardDetailsPage
                className="p-0 lg:p-0"
                title={title}
                description={data?.invoice_number ? `Invoice #: ${data.invoice_number}` : undefined}
                icon={<ReceiptIcon className="size-5" />}
                backHref="/purchase/expense"
                actions={<ExpenseActions expenseId={id} />}
                tabs={[
                    {
                        href: `/purchase/expense/${id}`,
                        label: 'Details',
                    },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </ExpenseProvider>
    )
}