1import React from "react";
 2import Typography from "@material-ui/core/Typography";
 3import { makeStyles } from "@material-ui/core/styles";
 4import { useTranslation } from "react-i18next";
 5import moment from "moment";
 6import Paper from "../../components/Paper";
 7
 8const Car = ({ car }) => {
 9  const classes = useStyles();
10  const { t } = useTranslation();
11
12  if (!car) return null;
13
14  return (
15    <Paper>
16      {!!car.departure && (
17        <Typography variant="overline">
18          {moment(car.departure).format("LLLL")}
19        </Typography>
20      )}
21      <Typography variant="h5">{car.name}</Typography>
22      {!!car.meeting && (
23        <div className={classes.section}>
24          <Typography variant="subtitle2">
25            {t("car.fields.meeting_point")}
26          </Typography>
27          <Typography variant="body2">{car.meeting}</Typography>
28        </div>
29      )}
30      {!!car.details && (
31        <div className={classes.section}>
32          <Typography variant="subtitle2">{t("car.fields.details")}</Typography>
33          <Typography variant="body2">{car.details}</Typography>
34        </div>
35      )}
36    </Paper>
37  );
38};
39
40const useStyles = makeStyles((theme) => ({
41  section: {
42    marginTop: theme.spacing(2),
43  },
44}));
45
46export default Car;