1import Box from '@mui/material/Box';
 2import Button from '@mui/material/Button';
 3import Card from '@mui/material/Card';
 4import Chip from '@mui/material/Chip';
 5import Divider from '@mui/material/Divider';
 6import List from '@mui/material/List';
 7import ListItem from '@mui/material/ListItem';
 8import ListItemIcon from '@mui/material//ListItemIcon';
 9import ListItemText from '@mui/material/ListItemText';
10import AddIcon from '@mui/icons-material/Add';
11import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
12import Typography from '@mui/material/Typography';
13import {useTranslation} from 'react-i18next';
14import {Event as EventType} from '../../generated/graphql';
15
16interface Props {
17  event: EventType;
18}
19
20const CarosterPlusSettings = ({event}: Props) => {
21  const {t} = useTranslation();
22
23  return (
24    <Card
25      sx={{
26        position: 'relative',
27        maxWidth: '100%',
28        width: '350px',
29        pb: 3,
30      }}
31    >
32      <Box
33        display="flex"
34        justifyContent="space-between"
35        width="100%"
36        p={2}
37        py={1}
38      >
39        <Typography variant="h4" pt={1}>
40          {t('options.plus.title')}
41        </Typography>
42      </Box>
43      <Divider />
44      <Box p={2} display="flex" justifyContent="space-between" width="100%">
45        <Typography pt={1} variant="body2" color="GrayText">
46          {t('options.plus.admins')}
47        </Typography>
48        <Button variant="text" endIcon={<AddIcon />}>
49          {t('generic.add')}
50        </Button>
51      </Box>
52      <List disablePadding>
53        <ListItem
54          secondaryAction={
55            <Chip label={t('options.plus.creator')} size="medium" />
56          }
57        >
58          <ListItemIcon>
59            <AccountCircleOutlinedIcon />
60          </ListItemIcon>
61          <ListItemText primary={event.email} />
62        </ListItem>
63      </List>
64    </Card>
65  );
66};
67
68export default CarosterPlusSettings;