import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {CroppedBody, Typography} from '@components';
import {LessonType} from '@modules/learning/interfaces';
import {useGetLessonIcon} from '@modules/learning/hooks';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  title: string;
  description?: string;
  type: LessonType;
  attachmentsCount?: number;
}

function LessonDescription({
  title,
  description,
  type,
  attachmentsCount,
}: Props) {
  const SelectedIcon = useGetLessonIcon(type);
  const {theme, iconSizes} = useTheme();
  const {t} = useTranslation();
  return (
    <View
      style={[
        styles.container,
        {borderBottomColor: theme.background.layout.default},
      ]}>
      <View style={styles.header}>
        <View style={styles.typeLabel}>
          <SelectedIcon
            color={theme.text.neutral.default}
            size={iconSizes.x4}
          />
          <Typography variant="xxs" color={theme.text.neutral.lighter}>
            {t(
              `learning.course.lesson.type.${type.toLowerCase()}`,
            ).toUpperCase()}
          </Typography>
        </View>
        <Typography weight="semiBold">{title}</Typography>
        {description && <CroppedBody isHtml body={description} />}
        {!!attachmentsCount && (
          <Typography color={theme.text.neutral.lighter} variant="xs">
            {`${t(
              'learning.common.supplementary_content',
            )}: ${attachmentsCount}`}
          </Typography>
        )}
      </View>
    </View>
  );
}

export default LessonDescription;