import { h } from '@ui-arch/frame';
import type { BreadcrumbProps } from './types.js';

/*** 面包屑：nav + ol 语义结构，末项为当前页（不可点、aria-current）；有 href 渲染 <a>，无 href 渲染 button 交 onNavigate ***/
export function breadcrumb(props: BreadcrumbProps): HTMLElement {
  const items = props.items;
  const sep = props.separator ?? '/';

  const entries = items.map((item, i) => {
    const last = i === items.length - 1; // 末项即当前页
    const node = last
      ? h('span', { class: 'ua-crumb-current', 'aria-current': 'page' }, item.label)
      : item.href
        ? h('a', { class: 'ua-crumb-link', href: item.href }, item.label)
        : h('button', { type: 'button', class: 'ua-crumb-link', onClick: () => props.onNavigate?.(item, i) }, item.label);
    return h('li', { class: 'ua-crumb-item' }, node, last ? null : h('span', { class: 'ua-crumb-sep', 'aria-hidden': 'true' }, sep));
  });

  return h('nav', { class: 'ua-breadcrumb', 'aria-label': '面包屑导航' }, h('ol', { class: 'ua-crumb-list' }, ...entries));
}