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

const data = {
  title: 'Πίνακας προϊόντων',
  labels: {
    product: 'Προϊόν',
    price: 'Τιμή',
    stock: 'Στοκ',
    date: 'Ημερομηνία',
  },
  content: [
    {
      id: 1,
      product: 'Τυρί',
      price: '4.9€',
      stock: 20,
      date: '2013-04-01',
    },
    {
      id: 2,
      product: 'Γάλα',
      price: '1.9€',
      stock: 32,
      date: '2013-01-01',
    },
    {
      id: 3,
      product: 'Γιαούρτι',
      price: '2.4€',
      stock: 12,
      date: '2002-04-12',
    },
    {
      id: 4,
      product: 'Κρέμα',
      price: '3.9€',
      stock: 8,
      date: '2011-12-12',
    },
    {
      id: 5,
      product: 'Βούτυρο',
      price: '0.9€',
      stock: 99,
      date: '2019-06-01',
    },
  ],
};

export const MultipleProps = (_: any) => {
  return (
    <TableContainer>
      <Table variant="zebra" headerVariant="dark" verticalBorders>
        {data && (
          <>
            <TableCaption>{data.title}</TableCaption>
            <TableHead>
              <TableRow>
                {data.labels && (
                  <>
                    <TableHeadCell>{data.labels.product}</TableHeadCell>
                    <TableHeadCell dataType="numeric">
                      {data.labels.price}
                    </TableHeadCell>
                    <TableHeadCell dataType="numeric">
                      {data.labels.stock}
                    </TableHeadCell>
                    <TableHeadCell dataType="numeric">
                      {data.labels.date}
                    </TableHeadCell>
                  </>
                )}
              </TableRow>
            </TableHead>
            <TableBody>
              {data.content &&
                data.content.map((item, index) => (
                  <TableRow key={index}>
                    <TableHeadCell data-label={data.labels.product}>
                      {item.product}
                    </TableHeadCell>
                    <TableDataCell
                      dataType="numeric"
                      data-label={data.labels.price}
                    >
                      {item.price}
                    </TableDataCell>
                    <TableDataCell
                      dataType="numeric"
                      data-label={data.labels.stock}
                    >
                      {item.stock}
                    </TableDataCell>
                    <TableDataCell
                      dataType="numeric"
                      data-label={data.labels.date}
                    >
                      {item.date}
                    </TableDataCell>
                  </TableRow>
                ))}
            </TableBody>
          </>
        )}
      </Table>
    </TableContainer>
  );
};
export default MultipleProps;