1import Typography from '@mui/material/Typography';
 2import ListItem from '@mui/material/ListItem';
 3import Box from '@mui/material/Box';
 4import Button from '@mui/material/Button';
 5import {useTranslation} from 'next-i18next';
 6import {
 7  FindUserVehiclesDocument,
 8  useDeleteVehicleMutation,
 9  VehicleEntity,
10} from '../../generated/graphql';
11import useProfile from '../../hooks/useProfile';
12import useTheme from '@mui/styles/useTheme';
13
14interface Props {
15  vehicle: VehicleEntity;
16  select: () => void;
17}
18
19const VehicleItem = ({vehicle, select}: Props) => {
20  const {t} = useTranslation();
21  const theme = useTheme();
22
23  const {userId} = useProfile();
24  const [deleteVehicleMutation] = useDeleteVehicleMutation({
25    variables: {id: vehicle.id},
26    refetchQueries: [{query: FindUserVehiclesDocument, variables: {userId}}],
27  });
28
29  return (
30    <ListItem
31      sx={{py: 2, px: 3, flexDirection: 'column', alignItems: 'flex-start'}}
32    >
33      <Box>
34        <Typography
35          variant="overline"
36          sx={{fontWeight: 'bold', opacity: 0.6, marginRight: theme.spacing(2)}}
37        >
38          {t('travel.vehicle.name')}
39        </Typography>
40        <Button
41          color="primary"
42          variant="text"
43          size="small"
44          onClick={() => deleteVehicleMutation()}
45        >
46          {t('generic.delete')}
47        </Button>
48      </Box>
49      <Typography
50        variant="body1"
51        sx={{maxWidth: '75%', marginBottom: theme.spacing(1)}}
52      >
53        {vehicle.attributes.name}
54      </Typography>
55      <Typography
56        variant="overline"
57        sx={{fontWeight: 'bold', opacity: 0.6, marginRight: theme.spacing(2)}}
58      >
59        {t('travel.vehicle.seats_number')}
60      </Typography>
61      <Typography
62        variant="body1"
63        sx={{maxWidth: '75%', marginBottom: theme.spacing(1)}}
64      >
65        {vehicle.attributes.seats}
66      </Typography>
67      <Button
68        sx={{
69          display: 'block',
70          maxWidth: '300px',
71          margin: `0 auto ${theme.spacing(1.5)} auto`,
72        }}
73        fullWidth
74        color="primary"
75        variant="contained"
76        onClick={select}
77      >
78        {t('generic.select')}
79      </Button>
80    </ListItem>
81  );
82};
83
84export default VehicleItem;