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