import React from 'react';

import {
  Table,
  TableBody,
  TableContainer,
  TableDataCell,
  TableHead,
  TableHeadCell,
  TableNoDataRow,
  TableRow,
} from '@digigov/ui/content/Table';

export function DataTable({ dataConfig, data }) {
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            {dataConfig.map((itenConfig) => (
              <TableHeadCell key={itenConfig.key}>
                {itenConfig.title}
              </TableHeadCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {data.length > 0 ? (
            data.map((item, index) => (
              <TableRow key={index}>
                {dataConfig.map((itemConfig, idx) => (
                  <TableDataCell key={idx}>
                    {itemConfig.displayComponent
                      ? itemConfig.displayComponent(item[itemConfig.key])
                      : item[itemConfig.key]}
                  </TableDataCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableNoDataRow>Δεν υπάρχουν αποτελέσματα</TableNoDataRow>
          )}
        </TableBody>
      </Table>
    </TableContainer>
  );
}