import { IconClock, IconEyeCheck } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

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

import { type CourseDetail as CourseDetailType } from 'src/pages/dashboard/Learning/Courses/types';
import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import { getDurationTime } from 'src/pages/dashboard/Learning/common/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type CourseInformationProps = {
  course: CourseDetailType | undefined;
  loading?: boolean;
};

export const CourseInformation = ({
  course,
  loading = false,
}: CourseInformationProps) => {
  const { t } = useLokaliseTranslation('learning');

  const properties = [
    {
      Icon: IconEyeCheck,
      label: t('common.type'),
      value: course?.isObligatory ? t('course.required') : t('course.optional'),
      visible: !!course,
    },
    {
      Icon: IconClock,
      label: t('common.duration_title'),
      value: getDurationTime(t, course?.durationTime),
      visible: !!course?.durationTime,
    },
  ];

  return (
    <LearningCard color="grey">
      <TextInformation
        slotProps={{ seeMoreText: { lines: 5 } }}
        description={course?.body}
        loading={loading}
        copetin={course?.category?.name}
        title={course?.title}
        sx={{
          '& button': { '&:hover': { backgroundColor: 'transparent' } },
        }}
      />
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'flex-start',
          flexWrap: 'wrap',
          gap: 0.5,
        }}
      >
        {properties.map(property => (
          <Property
            key={property.label}
            loading={loading}
            title={property.label}
            description={property.value}
            Icon={property.Icon}
            visible={property.visible}
          />
        ))}
      </Stack>
    </LearningCard>
  );
};
