import { FC } from 'react';
import { useTranslation } from 'react-i18next';

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

import FormRadioGroup from '@material-hu/components/composed-components/RadioGroup/form';
import Alert from '@material-hu/components/design-system/Alert';

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

  return (
    <Stack gap={1.5}>
      <Alert
        severity="info"
        title={t('group:members_can_leave_warning_title')}
        description={t('group:members_can_leave_warning_description')}
      />
      <FormRadioGroup
        name="membersCanLeave"
        options={[
          {
            value: true,
            label: t('group:members_can_leave_enabled'),
            helperText: t('group:members_can_leave_enabled_description'),
          },
          {
            value: false,
            label: t('group:members_can_leave_disabled'),
            helperText: t('group:members_can_leave_disabled_description'),
          },
        ]}
      />
    </Stack>
  );
};

export default MembersCanLeaveConfig;