lti-web-client/src/components/helper/pdf/table/PdfTfoot.tsx

'use client';

import { Text, View, StyleSheet } from '@react-pdf/renderer';

export interface PdfColumn {
  key: string;
  header: string;
  flex: number;
  align?: 'left' | 'center' | 'right';
}

export interface PdfTfootCell {
  key: string;
  value: string | number;
  align?: 'left' | 'center' | 'right';
  flex?: number;
  color?: string;
}

const styles = StyleSheet.create({
  tableRow: {
    flexDirection: 'row',
  },
  summaryRow: {
    backgroundColor: '#F0F0F0',
    fontWeight: 'bold',
  },
  tableCell: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    textAlign: 'left',
  },
  tableCellLast: {
    flex: 1,
    padding: 4,
    fontSize: 7,
    borderRightWidth: 0,
  },
  tableCellRight: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    textAlign: 'right',
  },
  tableCellCenter: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    textAlign: 'center',
  },
  tableCellNo: {
    flex: 0.5,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    textAlign: 'center',
  },
});

interface PdfTfootProps {
  columns: PdfColumn[];
  cells: PdfTfootCell[];
  label?: string;
}

export const PdfTfoot = ({
  columns,
  cells,
  label = 'Total',
}: PdfTfootProps) => {
  return (
    <View style={[styles.tableRow, styles.summaryRow]}>
      {columns.map((column, index) => {
        const isLastColumn = index === columns.length - 1;
        const cellData = cells.find((c) => c.key === column.key);

        const cellStyle =
          column.key === 'no'
            ? [
                styles.tableCellNo,
                { flex: column.flex, borderRightWidth: isLastColumn ? 0 : 1 },
              ]
            : cellData?.align === 'right'
              ? [
                  styles.tableCellRight,
                  {
                    flex: column.flex,
                    color: cellData?.color || 'black',
                    borderRightWidth: isLastColumn ? 0 : 1,
                  },
                ]
              : cellData?.align === 'center'
                ? [
                    styles.tableCellCenter,
                    {
                      flex: column.flex,
                      color: cellData?.color || 'black',
                      borderRightWidth: isLastColumn ? 0 : 1,
                    },
                  ]
                : isLastColumn
                  ? [styles.tableCellLast, { flex: column.flex }]
                  : [
                      styles.tableCell,
                      {
                        flex: column.flex,
                        color: cellData?.color || 'black',
                      },
                    ];

        return (
          <View key={column.key} style={cellStyle}>
            <Text>{column.key === 'no' ? label : cellData?.value || ''}</Text>
          </View>
        );
      })}
    </View>
  );
};