import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import useRules from 'src/hooks/useRules';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import FormTextField from 'src/components/FormInputs/FormTextField';

const GroupMembersReportDrawer: FC = () => {
  const { t } = useTranslation(['group']);

  const emailRules = () =>
    useRules({
      requiredWithMessage: true,
      email: true,
    });

  return (
    <Stack sx={{ gap: 3 }}>
      <Typography variant="globalS">
        {t('group:group_members_report_drawer_description_web')}
      </Typography>
      <Stack sx={{ gap: 2 }}>
        <FormTextField
          name="email"
          rules={emailRules()}
          label={t('group:email')}
          type="email"
          variant="outlined"
          showErrors
        />
      </Stack>
    </Stack>
  );
};

export default GroupMembersReportDrawer;