'use client';

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

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

const styles = StyleSheet.create({
  tableRow: {
    flexDirection: 'row',
  },
  tableHeader: {
    backgroundColor: '#F5F5F5',
  },
  tableCellHeader: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    fontWeight: 'bold',
    backgroundColor: '#F5F5F5',
    borderBottomWidth: 1,
    borderBottomColor: '#000000',
    borderBottomStyle: 'solid',
    paddingVertical: 12,
    textAlign: 'center',
  },
  tableCellHeaderRight: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    fontWeight: 'bold',
    backgroundColor: '#F5F5F5',
    textAlign: 'right',
    borderBottomWidth: 1,
    borderBottomColor: '#000000',
    borderBottomStyle: 'solid',
    paddingVertical: 12,
  },
});

interface PdfTheadProps {
  columns: PdfColumn[];
}

export const PdfThead = ({ columns }: PdfTheadProps) => {
  return (
    <View style={[styles.tableRow, styles.tableHeader]}>
      {columns.map((column, index) => {
        const align = column.align || 'center';
        const isLastColumn = index === columns.length - 1;

        const cellStyle =
          align === 'right'
            ? [
                styles.tableCellHeaderRight,
                {
                  flex: column.flex,
                  textAlign: 'right' as const,
                  borderRightWidth: isLastColumn ? 0 : 1,
                },
              ]
            : [
                styles.tableCellHeader,
                {
                  flex: column.flex,
                  textAlign: align as 'left' | 'center' | 'right',
                  borderRightWidth: isLastColumn ? 0 : 1,
                },
              ];

        return (
          <View key={column.key} style={cellStyle}>
            <Text>{column.header}</Text>
          </View>
        );
      })}
    </View>
  );
};