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

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

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

import { type Course } from '../../types';

import MainLayout from './MainLayout';

export type ModuleFinishedProps = {
  course: Course | undefined;
  loadingCourse?: boolean;
  onNext: () => Promise<void>;
  onPrevious: () => void;
};

export const ModuleFinished = ({
  course,
  loadingCourse = false,
  onNext,
  onPrevious,
}: ModuleFinishedProps) => {
  const { t } = useLokaliseTranslation(['learning', 'general']);

  const nextButton = {
    onClick: onNext,
    children: t('general:continue'),
  };

  const previousButton = {
    onClick: onPrevious,
    children: t('course.lesson.previous'),
  };

  return (
    <MainLayout
      course={course}
      loading={loadingCourse}
      nextButton={nextButton}
      previousButton={previousButton}
    >
      <HuCardContainer
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            gap: 2,
          },
        }}
      >
        <HuAvatar
          Icon={IconCheck}
          color="success"
          size="large"
        />
        <HuTitle
          title={t('course.lesson.completed_module_title')}
          description={t('course.lesson.completed_module_description')}
          centered
          variant="M"
        />
      </HuCardContainer>
    </MainLayout>
  );
};

export default ModuleFinished;