import { IRouteLink } from '@websolutespa/bom-core';
import { resolveHref } from '@websolutespa/bom-mixer-models';
import { ListItem } from 'schema-dts';
import { StructuredData } from '../meta-data/structured-data';
import { UIStyledComponentProps } from '../types';
import { BreadcrumbBase } from './breadcrumb-base';
import { BreadcrumbItem } from './breadcrumb-item';

export type Props = {
  items: IRouteLink[];
};

export type BreadcrumbGroupProps = UIStyledComponentProps<Props>;

export function BreadcrumbGroup({ items, ...props }: BreadcrumbGroupProps) {
  return (
    <BreadcrumbBase {...props}>
      {items.map((x, i) => (
        <BreadcrumbItem key={i} href={i < items.length - 1 ? x.href : undefined}>{x.title}</BreadcrumbItem>
      ))}
      <StructuredData item={(metaData) => ({
        '@type': 'BreadcrumbList',
        itemListElement: items.map((item, i) => ({
          '@type': 'ListItem',
          position: i + 1,
          name: item.title,
          item: resolveHref(item.href),
        })) as ListItem[],
      })} />
    </BreadcrumbBase>
  );
}