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

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

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

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

import PathCourseCard from './PathCourseCard';

export type PathContentProps = {
  path: Path;
};

const PathContent = ({ path }: PathContentProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <Stack sx={{ gap: 1.5, width: '100%' }}>
      <Title
        variant="M"
        title={t('path.courses.title')}
      />
      <Stack sx={{ gap: 2, width: '100%' }}>
        {path.courses.map((course, courseIndex) => (
          <PathCourseCard
            key={course.id}
            path={path}
            course={course}
            courseIndex={courseIndex}
          />
        ))}
      </Stack>
    </Stack>
  );
};

export default PathContent;