import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { EmployeeActions } from '@/modules/employees/employee-actions'
import { EmployeeProvider } from '@/modules/employees/employee-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 employee = await api.employees.getById(id)

    const firstName = employee.data?.first_name || ''
    const lastName = employee.data?.last_name || ''
    const title = [firstName, lastName].filter(Boolean).join(' ') || 'Employee Details'
    const employeeLabel = title

    return (
        <>
            <EmployeeProvider employee={{ id, label: employeeLabel }}>
                <DashboardDetailsPage
                    className="p-0 lg:p-0"
                    title={title}
                    description={(employee.data as any)?.position || employee.data?.designation || undefined}
                    backHref="/productivity/employees"
                    actions={<EmployeeActions employeeId={id} />}
                    tabs={[
                        { href: `/productivity/employees/${id}`, label: 'Details' },
                        { href: `/productivity/employees/${id}/attendance`, label: 'Attendance' },
                        { href: `/productivity/employees/${id}/work-history`, label: 'Work History' },
                        { href: `/productivity/employees/${id}/permissions`, label: 'Permissions' },
                    ]}
                >
                    {props.children}
                </DashboardDetailsPage>
            </EmployeeProvider>
        </>
    )
}
