dry-wash-pl/src/components/MasterItem/MasterItem.tsx

import React from 'react';
import { Badge, Stack, Td, Tr, Text } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

import MasterActionsMenu from '../MasterActionsMenu';
import { getTimeSlot } from '../../lib';
import EditableWrapper from '../Editable/Editable';

const MasterItem = ({ name, phone, id, schedule }) => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master',
  });

  return (
    <Tr>
      <Td>
        <EditableWrapper id={id} fieldName={'name'} value={name} />
      </Td>
      <Td>
        {schedule?.length > 0 ? (
          <Stack direction='row'>
            {schedule?.map(({ startWashTime, endWashTime }, index: number) => (
              <Badge colorScheme={'green'} key={index}>
                {getTimeSlot(startWashTime, endWashTime)}
              </Badge>
            ))}
          </Stack>
        ) : (
          <Text color='gray.500'>{t('schedule.empty')}</Text>
        )}
      </Td>
      <Td>
        <EditableWrapper id={id} fieldName={'phone'} value={phone} />
      </Td>
      <Td>
        <MasterActionsMenu id={id} />
      </Td>
    </Tr>
  );
};

export default MasterItem;