import React from 'react';
import { SilkeBox, BoxNavProps } from '../silke-box';
import styles from './silke-breadcrumb.scss';

type SilkeBreadcrumbsProps = {
  maxItems?: number;
} & Omit<BoxNavProps, 'gap'>;

export function SilkeBreadcrumbs({ children, ...rest }: SilkeBreadcrumbsProps) {
  return (
    <SilkeBox tag="nav" aria-label="Breadcrumbs" {...rest}>
      <SilkeBox tag="ol" gap="s" className={styles.breadbrumbs}>
        {children}
      </SilkeBox>
    </SilkeBox>
  );
}