import { IconUserStar } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import Image from '@material-hu/components/composed-components/Image';
import TextInformation from '@material-hu/components/composed-components/learning/TextInformation';
import Property from '@material-hu/components/composed-components/Property';

import newDefaultCourseImg from 'src/assets/svg/newDefaultCourse.svg';
import { type Course } from 'src/pages/dashboard/learning/courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { CourseCategoriesPills } from './CourseCategoriesPills';
import { CourseProperties } from './CourseProperties';
import CourseStartButton from './CourseStartButton';

export const CourseInformation = ({ course }: { course: Course }) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('learning');
  const { categoryTree } = course;

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'stretch',
        justifyContent: 'space-between',
        gap: 3,
      }}
    >
      <Stack sx={{ gap: 2, justifyContent: 'space-between' }}>
        <CourseCategoriesPills categoryTree={categoryTree} />
        <TextInformation
          variant="XL"
          title={course.title}
          description={course.body}
          slotProps={{
            seeMoreText: {
              typographyProps: { color: palette.new.text.neutral.lighter },
            },
          }}
        />
        <Stack sx={{ gap: 1.5 }}>
          {course.instructor && (
            <Property
              Icon={IconUserStar}
              title={t('common.instructed_by')}
              description={course.instructor}
            />
          )}
          <CourseProperties course={course} />
          <CourseStartButton course={course} />
        </Stack>
      </Stack>
      <Image
        src={course.pictureUrl}
        defaultSrc={newDefaultCourseImg}
        sx={{ maxWidth: 385 }}
      />
    </Stack>
  );
};
