import { Head } from '@inertiajs/react';
import { FinanceAppLayout } from '@/layouts/finance-app-layout';
import { useAppText } from '@/lib/app-text';
import type { FundRequest } from '@/types/fund-request';
import { FundRequestDetailView } from './components/FundRequestDetailView';

interface FundRequestShowPageProps {
    title: string;
    fundRequest: FundRequest;
    permissions?: {
        canApproveCostControl?: boolean;
        canApproveTaxOfficer?: boolean;
        canApproveSpvFinance?: boolean;
        canApproveManagerFinance?: boolean;
        canUploadPayment?: boolean;
        canUploadReport?: boolean;
    };
}

export default function FundRequestShow({ title, fundRequest, permissions }: FundRequestShowPageProps) {
    const { t: text } = useAppText();

    return (
        <FinanceAppLayout>
            <Head title={title || text('fund_request.detail_title')} />

            <div className="flex h-full flex-1 flex-col gap-4 p-4">
                <div className="rounded-2xl border bg-card p-5 shadow-sm">
                    <FundRequestDetailView
                        fundRequest={fundRequest}
                        companies={[]}
                        employees={[]}
                        banks={[]}
                        permissions={permissions}
                    />
                </div>
            </div>
        </FinanceAppLayout>
    );
}
