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

import useAuth from 'src/contexts/JWTContext';
import StatCard from 'src/pages/dashboard/Learning/Sessions/List/components/StatCard';
import { type SessionAttendanceStats } from 'src/pages/dashboard/Learning/Sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getCurrentLocale } from 'src/utils/locale';

type AssignedColaboratorsProps = {
  stats: SessionAttendanceStats;
};

const AssignedColaborators = ({ stats }: AssignedColaboratorsProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { user } = useAuth();
  const localeCode = getCurrentLocale(user).code;

  const formattedTotalAssigned =
    stats?.totalAssigned?.toLocaleString(localeCode);

  return (
    <StatCard
      sx={{ width: 'fit-content', minWidth: '300px' }}
      title={t('common.colaborators.assigned')}
    >
      <Typography
        variant="globalXXL"
        fontWeight="fontWeightSemiBold"
        sx={{ textAlign: 'center', my: 'auto' }}
      >
        {formattedTotalAssigned}
      </Typography>
    </StatCard>
  );
};

export default AssignedColaborators;
