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

import MasterActionsMenu from '../MasterActionsMenu';
import { getTimeSlot } from '../../lib/date-helpers';

export interface Schedule {
  id: string;
  startWashTime: string;
  endWashTime: string;
}

export type MasterProps = {
  id: string;
  name: string;
  schedule: Schedule[];
  phone: string;
};

const MasterItem = ({ name, schedule, phone }) => {
  return (
    <Tr>
      <Td>{name}</Td>
      <Td>
        <Stack direction='row'>
          {schedule.map(({ startWashTime, endWashTime }, index) => (
            <Badge colorScheme={'green'} key={index}>
              {getTimeSlot(startWashTime, endWashTime)}
            </Badge>
          ))}
        </Stack>
      </Td>
      <Td>
        <Link href='tel:'>{phone}</Link>
      </Td>
      <Td>
        <MasterActionsMenu />
      </Td>
    </Tr>
  );
};

export default MasterItem;