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

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

import { type CourseCategory } from 'src/pages/dashboard/learning/courses/types';

type CourseCategoryPillsProps = {
  categoryTree: CourseCategory[];
};

export const CourseCategoriesPills = ({
  categoryTree,
}: CourseCategoryPillsProps) => {
  if (!categoryTree || !categoryTree.length) return null;

  return (
    <Stack sx={{ flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}>
      {categoryTree.map(category => (
        <Pills
          key={category.id}
          label={category.name}
          type="neutral"
          hasIcon={false}
          sx={{ maxWidth: 'fit-content' }}
        />
      ))}
    </Stack>
  );
};
