import { html, css, LitElement } from 'lit';
import { property, customElement } from 'lit/decorators.js';
import './BreadcrumbsItem';

@customElement('arx-breadcrumbs')
export class Breadcrumbs extends LitElement {
  @property({ type: Array }) items: { text: string; href?: string }[] = [];

  static override styles = [
    css`
      nav {
        max-width: 1200px;
        margin: 1rem auto;
        padding-inline: 1rem;
        font-size: 0.9rem;
      }

      ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
    `,
  ];

  override render() {
    return html`
      <nav aria-label="Breadcrumb">
        <ol>
          ${this.items.map(
            (item, index) => html`
            <arx-breadcrumbs-item
              .text=${item.text}
              .href=${item.href}
              .index=${index}
            ></arx-breadcrumbs-item>
          `,
          )}
        </ol>
      </nav>
    `;
  }
}