import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-breadcrumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-family:var(--font-sans);font-size:var(--text-sm);}
.nbl-breadcrumb__item{display:inline-flex;align-items:center;gap:4px;}
.nbl-breadcrumb__link{color:var(--text-muted);text-decoration:none;border-radius:var(--radius-sm);padding:2px 4px;margin:-2px -4px;transition:color var(--dur-fast),background var(--dur-fast);cursor:pointer;border:none;background:transparent;font-family:inherit;font-size:inherit;}
.nbl-breadcrumb__link:hover{color:var(--text-strong);background:var(--surface-sunken);}
.nbl-breadcrumb__current{color:var(--text-strong);font-weight:var(--weight-medium);}
.nbl-breadcrumb__sep{color:var(--text-faint);display:flex;align-items:center;flex-shrink:0;}
`;

inject('nbl-breadcrumb-css', css);

export interface BreadcrumbItem {
  label: string;
  href?: string;
  onClick?: () => void;
}

export interface BreadcrumbProps {
  items: BreadcrumbItem[];
  className?: string;
}

const Chevron = () => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
    <path d="M4 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

export function Breadcrumb({ items, className = '' }: BreadcrumbProps) {
  inject('nbl-breadcrumb-css', css);
  const cls = ['nbl-breadcrumb', className].filter(Boolean).join(' ');

  return (
    <nav className={cls} aria-label="Breadcrumb">
      <ol style={{ display: 'contents' }}>
        {items.map((item, i) => {
          const isLast = i === items.length - 1;
          return (
            <li key={i} className="nbl-breadcrumb__item">
              {i > 0 && (
                <span className="nbl-breadcrumb__sep" aria-hidden="true">
                  <Chevron />
                </span>
              )}
              {isLast ? (
                <span className="nbl-breadcrumb__current" aria-current="page">
                  {item.label}
                </span>
              ) : item.href ? (
                <a className="nbl-breadcrumb__link" href={item.href} onClick={item.onClick}>
                  {item.label}
                </a>
              ) : (
                <button className="nbl-breadcrumb__link" onClick={item.onClick} type="button">
                  {item.label}
                </button>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}