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

import { Group } from 'src/types/groups';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const GroupTitleDescription = ({ group }: { group?: Group }) => {
  const { t } = useLokaliseTranslation('events');
  return (
    <>
      {group && (
        <>
          <Typography fontWeight="fontWeightSemiBold">
            {`${t('GROUP')} - `}
          </Typography>
          <Typography>{t('MEMBERS_GROUPS_TITLE')}</Typography>
          <Typography sx={{ fontWeight: 'fontWeightSemiBold' }}>
            {group?.title}
          </Typography>
        </>
      )}
      {!group && <Typography>{t('PUBLIC')}</Typography>}
    </>
  );
};

export default GroupTitleDescription;