// components/reports/Report.tsx

import {Document, Page, Font} from "@react-pdf/renderer";
import {PImage, PLink, PText, PView} from "@/components/pdf-ui";


Font.register({
    family: "Work Sans",
    fonts: [
        {
            src: `${BASE_CDN_URL}/Work_Sans/WorkSans-Regular.ttf`,
            fontWeight: 400,
        },
        {
            src: `${BASE_CDN_URL}/Work_Sans/WorkSans-Medium.ttf`,
            fontWeight: 500,
        }
    ],
});

export const Report = ({record}: ReportProps) => {


    return <Document>
        <Page size="A4" style={{
            fontFamily: "Work Sans",
            fontSize: 16,
            color: 'rgb(31 41 55)',
            padding: 24,
        }}>
        {/*  HEADER  */}
        <PView className={'flex flex-row justify-between items-center mb-6'}>
            <PView className={'flex flex-row items-center'}>
                <PImage className={'h-10 w-10'}
                        src="https://res.cloudinary.com/trackfundx/image/upload/v1723306722/expense-ai-logo.png"
                        cache/>
                <PView className={'ml-3'}>
                    <PText className={'font-semibold text-gray-800'}>Expense AI -
                        Report</PText>
                    <PText className={'text-xs text-gray-600'}>Generated on <PText
                        className={'font-medium'}>{record.currentDate}</PText> at <PText
                        className={'font-medium'}>{record.currentTime}</PText> via <PLink
                        className={'text-blue-800'}
                        href="https://expenseai.app?utm=expense-report"><PText className={'underline'}
                    >https://expenseai.app</PText></PLink></PText>
                </PView>
            </PView>
            <PView className={'text-right'}>
                <PText className={'font-semibold text-gray-800'}>{record.user.name}</PText>
                <PText className={'text-xs'}>
                    <PLink className={'text-blue-800'} href="mailto:{{email}}">
                        {record.user.email}
                    </PLink>
                </PText>
            </PView>
        </PView>
        
        // ...
        
        </Page>
</Document>
        
}