import React, { FC, ReactType } from 'react';
import { LinkProps } from '../../blocks/Link';

import css from './index.module.css';

export interface BreadcrumbProps {
  items: {
    name: string;
    LinkProps: LinkProps;
    Link: ReactType;
  }[];
}

const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => (
  <ul className={css.breadcrumb}>
    {items &&
      items.map(item => (
        <li className={css.breadcrumb__item} key={item.name}>
          {item.Link ? (
            <item.Link {...item.LinkProps} className={css.breadcrumb__itemLink}>
              {item.name}
            </item.Link>
          ) : (
            <span>{item.name}</span>
          )}
        </li>
      ))}
  </ul>
);

export default Breadcrumb;