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

import '@components/BreadcrumbsItem';

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

  static override styles = [
    css`
      :host {
        display: block;
      }

      nav {
        max-width: 1200px;
        margin: 1.25rem auto;
        background-color: var(--color-base-200);
        border-radius: var(--radius-box);
        border: var(--border) solid var(--color-base-300);
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
            calc(var(--depth) * 4px)
            oklch(from var(--color-base-content) l c h / 0.1),
          calc(var(--depth) * -1px) calc(var(--depth) * -1px)
            calc(var(--depth) * 3px)
            oklch(from var(--color-base-100) l c h / 0.4);
      }

      ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        color: var(--color-base-content);
      }

      ol::-webkit-scrollbar {
        display: none;
      }

      @media (max-width: 640px) {
        nav {
          padding: 0.5rem 1rem;
          margin: 0.75rem auto;
        }
      }
    `,
  ];

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