1import {Box, Divider, Typography} from '@mui/material';
 2import {useMemo} from 'react';
 3import {useTranslation} from 'react-i18next';
 4import useEventStore from '../../stores/useEventStore';
 5
 6type Props = {};
 7
 8const ListHeader = (props: Props) => {
 9  const {t} = useTranslation();
10  const event = useEventStore(s => s.event);
11  const travels = useMemo(
12    () =>
13      event?.travels?.data?.length > 0 ? event?.travels?.data.slice() : [],
14    [event?.travels?.data]
15  );
16
17  const count = useMemo(() => {
18    if (!travels) return;
19    return travels.reduce((count, {attributes: {seats, passengers}}) => {
20      if (!seats) return 0;
21      else if (!passengers) return count + seats;
22      return count + seats - passengers?.data?.length;
23    }, 0);
24  }, [travels]);
25
26  return (
27    <>
28      <Box p={2}>
29        <Typography variant="h5">{t('passenger.title')}</Typography>
30        <Typography variant="overline">
31          {t('passenger.availability.seats', {count})}
32        </Typography>
33        <Typography variant="body2" mt={2} whiteSpace="pre-line">
34          {t`passenger.waitingList.helper`}
35        </Typography>
36      </Box>
37      <Divider />
38    </>
39  );
40};
41
42export default ListHeader;