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

const borderColor = '#90e5fc'
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        borderBottomColor: '#bff0fd',
        backgroundColor: '#bff0fd',
        borderBottomWidth: 1,
        alignItems: 'center',
        height: 34,
        textAlign: 'center',
        fontStyle: 'bold',
        flexGrow: 1,
    },
    aColumn: {
        borderRightColor: borderColor,
        borderRightWidth: 1,
        flex: 1,
        overflowWrap: 'break-word'
    },
    /*
    description: {
        width: '60%',
        borderRightColor: borderColor,
        borderRightWidth: 1,
    },
    qty: {
        width: '10%',
        borderRightColor: borderColor,
        borderRightWidth: 1,
    },
    rate: {
        width: '15%',
        borderRightColor: borderColor,
        borderRightWidth: 1,
    },
    amount: {
        width: '15%'
    },
    */
  });

  const ReportTableHeader = ({labels}) => (
    <View style={styles.container}>
        {
            labels.map((label, index) => (
                <Text key={`col-${index}`} style={styles.aColumn}>{label}</Text>
            ))
        }        
    </View>
  );
  
  export default ReportTableHeader