import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { PaymentMadeActions } from '@/modules/payment-mades/payment-made-actions'
import { BanknoteIcon } from 'lucide-react'
import React from 'react'

export default async function PaymentMadeDetailLayout(props: {
    params: Promise<{ id: string }>
    children: React.ReactNode
}) {
    const { id } = await props.params
    const api = await getServerApi()
    const payment = await api.paymentMades.show(id)
    const data = (payment as any)?.data ?? payment
    const title = data?.payment_number || 'Payment Details'

    return (
        <DashboardDetailsPage
            title={title}
            description={data?.payment_number ? `Payment #: ${data.payment_number}` : undefined}
            icon={<BanknoteIcon className="size-5" />}
            backHref="/purchase/payments-made"
            actions={<PaymentMadeActions paymentId={id} />}
            tabs={[
                {
                    href: `/purchase/payments-made/${id}`,
                    label: 'Details',
                },
            ]}
        >
            {props.children}
        </DashboardDetailsPage>
    )
}