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

import Property from '@material-hu/components/composed-components/Property';
import { type PropertyProps } from '@material-hu/components/composed-components/Property/types';

import useFormatDate from 'src/hooks/useFormatDate';
import { type Course } from 'src/pages/dashboard/learning/courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getDurationTime } from 'src/utils/time';

export const CourseProperties = ({ course }: { course: Course }) => {
  const { t } = useLokaliseTranslation('learning');
  const { formatDate } = useFormatDate();

  const duration = getDurationTime(course.durationTime);

  const properties: PropertyProps[] = [
    {
      Icon: IconCalendarExclamation,
      title: t('common.due_date_title'),
      description: course.dueDate ? formatDate(course.dueDate) : '--',
      visible: !!course.dueDate,
    },
    {
      Icon: IconEyeCheck,
      title: t('common.type'),
      description: course.isObligatory
        ? t('course.required')
        : t('course.optional'),
      visible: true,
    },
    {
      Icon: IconClock,
      title: t('common.duration_title'),
      description: duration,
      visible: !!duration,
    },
  ];

  return (
    <Stack
      sx={{
        gap: 1.5,
        flexDirection: 'row',
        flexWrap: 'wrap',
        color: ({ palette }) => palette.new.text.neutral.default,
      }}
    >
      {properties.map(property => (
        <Property
          key={property.title}
          {...property}
        />
      ))}
    </Stack>
  );
};
