1import React from 'react';
 2import Typography from '@material-ui/core/Typography';
 3import IconButton from '@material-ui/core/IconButton';
 4import Icon from '@material-ui/core/Icon';
 5import {makeStyles} from '@material-ui/core/styles';
 6import moment from 'moment';
 7import {useTranslation} from 'react-i18next';
 8
 9const Header = ({car, toggleEditing}) => {
10  const classes = useStyles();
11  const {t} = useTranslation();
12  return (
13    <div className={classes.header}>
14      <IconButton
15        size="small"
16        color="primary"
17        className={classes.editBtn}
18        onClick={toggleEditing}
19        id="EditCarBtn"
20      >
21        <Icon>edit</Icon>
22      </IconButton>
23      {!!car.departure && (
24        <Typography variant="overline" id="CarDeparture">
25          {moment(car.departure).format('LLLL')}
26        </Typography>
27      )}
28      <Typography variant="h5" id="CarName">
29        {car.name}
30      </Typography>
31      {!!car.phone_number && (
32        <div className={classes.section}>
33          <Typography variant="subtitle2">{t('car.fields.phone')}</Typography>
34          <Typography variant="body2" id="CarPhone">
35            {car.phone_number}
36          </Typography>
37        </div>
38      )}
39      {!!car.meeting && (
40        <div className={classes.section}>
41          <Typography variant="subtitle2">
42            {t('car.fields.meeting_point')}
43          </Typography>
44          <Typography variant="body2" id="CarMeeting">
45            {car.meeting}
46          </Typography>
47        </div>
48      )}
49      {!!car.details && (
50        <div className={classes.section}>
51          <Typography variant="subtitle2">{t('car.fields.details')}</Typography>
52          <Typography variant="body2" id="CarDetails">
53            {car.details}
54          </Typography>
55        </div>
56      )}
57    </div>
58  );
59};
60
61const useStyles = makeStyles(theme => ({
62  header: {
63    padding: theme.spacing(2),
64  },
65  editBtn: {
66    position: 'absolute',
67    top: 0,
68    right: 0,
69    margin: theme.spacing(1),
70    zIndex: theme.zIndex.speedDial,
71  },
72  section: {
73    marginTop: theme.spacing(2),
74  },
75}));
76
77export default Header;