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

export default async function PaymentReceivedDetailLayout(props: {
    params: Promise<{ id: string }>
    children: React.ReactNode
}) {
    const { id } = await props.params
    const api = await getServerApi()
    const payment = await api.paymentReceived.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="/sales/payment-received"
            actions={<PaymentReceivedActions paymentId={id} />}
            tabs={[
                {
                    href: `/sales/payment-received/${id}`,
                    label: 'Details',
                },
            ]}
        >
            {props.children}
        </DashboardDetailsPage>
    )
}