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

const data = {
  title: 'Χρήστες',
  labels: {
    name: 'Ονοματεπώνυμο',
    role: 'Ρόλος',
    email: 'Email',
  },
  content: [
    {
      name: 'Μάριος Μενεξές',
      role: 'Χειριστής',
      email: 'marios@mail.com',
    },
    {
      name: 'Καλλιόπη Παπαδοπούλου',
      role: 'Χειριστής',
      email: 'kalliopi@mail.com',
    },
    {
      name: 'Μαρία Φλούπη',
      role: 'Διαχειριστής',
      email: 'maria@mail.com',
    },
    {
      name: 'Ηλέκτρα Αποστόλου',
      role: 'Διαχειριστής',
      email: 'ilektra@mail.com',
    },
  ],
};

export const ZebraProp = (_: any) => {
  return (
    <TableContainer>
      <Table variant="zebra">
        {data && (
          <>
            <TableCaption>{data.title}</TableCaption>
            <TableHead>
              <TableRow>
                {data.labels &&
                  Object.keys(data.labels).map((key) => (
                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>
                  ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {data.content &&
                data.content.map((item, index) => (
                  <TableRow key={index}>
                    <TableDataCell data-label={data.labels.name}>
                      {item.name}
                    </TableDataCell>
                    <TableDataCell data-label={data.labels.role}>
                      {item.role}
                    </TableDataCell>
                    <TableDataCell data-label={data.labels.email}>
                      {item.email}
                    </TableDataCell>
                  </TableRow>
                ))}
            </TableBody>
          </>
        )}
      </Table>
    </TableContainer>
  );
};
export default ZebraProp;