import { Stack, Table } from "@chakra-ui/react"


interface TableProps {
  tableHeadRow: string[];
  data: Record<string, any>[];
}



const DataTable: React.FC<TableProps> = ({ tableHeadRow, data }) => {
  return (
     <Stack mt={4} color={'#000000CC'} gap="10">
          <Table.Root  key={'line'} size="sm" variant={'line'}>
            <Table.Header >
              <Table.Row bg={'#02A0A0'} >
                {tableHeadRow.map((item, index)=><Table.ColumnHeader textAlign="center"  fontSize={'xs'} fontWeight={700} key={index} border={'none'}>{item}</Table.ColumnHeader>)}
                
              </Table.Row>
            </Table.Header>
            <Table.Body>
              {data.map((item:any, index) => (
                <Table.Row 
                      bg={index % 2 === 0 ? "#fff" : "#02A0A020"}  >
                  {tableHeadRow.map((heading)=><Table.Cell textAlign="center" key={index} fontSize={'xs'} fontWeight={500}  border={'none'}>{item[heading]}</Table.Cell>  )}
                  
                </Table.Row>))}
            
            </Table.Body>
          </Table.Root>
        </Stack>
  )
}

export default DataTable