import type {FC} from 'react';
import React from 'react';
import {AnchorLink} from 'dumi/theme';
import './SlugList.less';

const SlugsList: FC<{slugs: any}> = ({slugs}) => (
  <ul role="slug-list" className="__dumi-default-layout-toc">
    {slugs
      .filter(({depth}) => depth > 1 && depth < 4)
      .map(slug => (
        <li key={slug.heading} title={slug.value} data-depth={slug.depth}>
          <AnchorLink to={`#${slug.heading}`}>
            <span>{slug.value}</span>
          </AnchorLink>
        </li>
      ))}
  </ul>
);

export default SlugsList;