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