import React from 'react';
import {View, StyleSheet } from '@react-pdf/renderer';
import ReportTableHeader from './report-item.table-header.template'
import ReportTableRow from './report-item.table-row.template'
import ReportTableBlankSpace from './report-items.table-empty-row.template'
import ReportTableFooter from './report-items.table-footer.template'

const tableRowsCount = 11;

const styles = StyleSheet.create({
    tableContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginTop: 24,        
        // borderWidth: 1,
        // borderColor: '#bff0fd',
    },
});

  const ReportItemsTable = ({reportData, fields, labels}) => (
    <View style={styles.tableContainer}>
        <ReportTableHeader labels={labels}/>
        <ReportTableRow keys={fields} items={reportData.items} />
        {/* <ReportTableBlankSpace rowsCount={ tableRowsCount - reportData.items.length} /> */}
        {/* <ReportTableFooter items={reportData.items} /> */}
    </View>
  );
  
  export default ReportItemsTable