import MidCircle from '@material-hu/components/composed-components/MidCircle';

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';

type GeneralAttendanceChartProps = {
  stats: SessionAttendanceStats;
};

const GeneralAttendanceChart = ({ stats }: GeneralAttendanceChartProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <StatCard
      title={t('session.attendance.general_attendance')}
      sx={{ width: 'fit-content', minWidth: '250px' }}
    >
      <MidCircle
        current={stats?.assisted}
        total={stats?.totalAssigned}
        loading={!stats}
        sx={{
          '& .MidCircleChart-root': { maxWidth: '175px' },
          my: 'auto',
        }}
      />
    </StatCard>
  );
};

export default GeneralAttendanceChart;