import { IconCheck } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuTitle from '@material-hu/components/design-system/Title';

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

const TaskEvaluationSuccess = () => {
  const { t } = useLokaliseTranslation(['learning', 'general']);

  return (
    <Stack
      sx={{
        gap: 3,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <HuAvatar
        Icon={IconCheck}
        color="success"
        size="large"
      />
      <HuTitle
        variant="M"
        title={t('course.lesson.success_title')}
        description={t('course.lesson.success_description')}
        centered
      />
    </Stack>
  );
};

export default TaskEvaluationSuccess;
