import { FC } from 'react';

import HuAlert from '@material-hu/components/design-system/Alert';

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  selectedUsersCount: number;
  onClick?: () => void;
};

export const InvitePeopleFooter: FC<Props> = ({
  selectedUsersCount,
  onClick,
}) => {
  const { t } = useLokaliseTranslation('events');

  return (
    <HuAlert
      sx={{ height: 68 }}
      title={`${t('PEOPLE_SELECTED')}: ${selectedUsersCount}`}
      severity="info"
      action={
        onClick && {
          text: t('SEE_SELECTION'),
          onClick,
        }
      }
    />
  );
};

export default InvitePeopleFooter;
