import React from 'react';
import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

import OrderItem from '../OrderItem';
import { OrderProps } from '../OrderItem/OrderItem';
import data from '../../../stubs/json/arm-orders/success.json';

const Orders = () => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.order',
  });

  const TABLE_HEADERS = [
    'carNumber' as const,
    'washingTime' as const,
    'orderDate' as const,
    'status' as const,
    'telephone' as const,
    'location' as const,
  ];

  return (
    <Box p='8'>
      <Heading size='lg' mb='5'>
        {t('title')}
      </Heading>
      <Table variant='simple' colorScheme='blackAlpha'>
        <Thead>
          <Tr>
            {TABLE_HEADERS.map((name, key) => (
              <Th key={key}>{t(`table.header.${name}`)}</Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {data.body.map((order, index) => (
            <OrderItem
              key={index}
              {...order}
              status={order.status as OrderProps['status']}
            />
          ))}
        </Tbody>
      </Table>
    </Box>
  );
};

export default Orders;