import { times } from 'lodash-es';

import { ModuleAccordion } from '@material-hu/components/composed-components/learning';
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';

export type CourseContentProps = {
  course: Course | undefined;
  loading?: boolean;
};

const CourseContent = ({ course, loading = false }: CourseContentProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <HuCardContainer
      fullWidth
      color="grey"
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 1.5,
        },
      }}
    >
      <HuTitle
        variant="M"
        title={t('common.content')}
      />
      {loading &&
        times(4, index => (
          <ModuleAccordion
            key={index}
            loading
          />
        ))}
      {!loading &&
        course?.modules?.map(module => (
          <ModuleAccordion
            key={module.id}
            module={module}
          />
        ))}
    </HuCardContainer>
  );
};

export default CourseContent;