import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { CreditNoteActions } from '@/modules/credit-notes/credit-note-actions'
import { CreditNoteProvider } from '@/modules/credit-notes/credit-note-context'
import { ReceiptTextIcon } from 'lucide-react'
import React from 'react'

export default async function CreditNoteDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
    const { id } = await props.params
    const api = await getServerApi()
    const creditNote = await api.creditNotes.show(id)
    const data = (creditNote as any)?.data ?? creditNote
    const title = data?.subject || data?.credit_invoice || 'Credit Note Details'

    return (
        <CreditNoteProvider creditNote={{ id, label: title }}>
            <DashboardDetailsPage
                className='p-0 lg:p-0'
                title={title}
                description={data?.credit_invoice ? `Credit Note #: ${data.credit_invoice}` : undefined}
                icon={<ReceiptTextIcon className="size-5" />}
                backHref="/sales/credit-notes"
                actions={<CreditNoteActions creditNoteId={id} />}
                tabs={[
                    {
                        href: `/sales/credit-notes/${id}`,
                        label: 'Details'
                    },
                    {
                        href: `/sales/credit-notes/${id}/documents`,
                        label: 'Documents'
                    },
                    {
                        href: `/sales/credit-notes/${id}/notes`,
                        label: 'Notes'
                    },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </CreditNoteProvider>
    )
}