import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  Grid,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
} from '@material-ui/core';
import { ReservationProps } from './ReservationProps';

const useStyles = makeStyles(() => ({
  noShadow: {
    border: 'none',
    boxShadow: 'none',
    backgroundColor: 'transparent',
  },
}));

export const Reservation: FC<ReservationProps> = ({
  departure,
  destination,
  time,
  date,
}: ReservationProps) => {
  const classes = useStyles();

  return (
    <Grid item container style={{ paddingTop: '20px' }}>
      <Grid item xs={1} lg={2} />
      <Grid item xs={10} lg={8}>
        <TableContainer component={Paper}>
          <Table aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>DriveToHospital </TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              <TableRow key="departure">
                <TableCell component="th" scope="row">
                  Departure
                </TableCell>
                <TableCell align="right">{departure}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </TableContainer>
      </Grid>
      <Grid item xs={1} lg={2} />
    </Grid>
  );
};