import React from "react";

const CHEVRON = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>;

export function Breadcrumb({ className = "", children, ...props }) {
  return <nav aria-label="breadcrumb" className={className} data-slot="breadcrumb" {...props}>{children}</nav>;
}
export function BreadcrumbList({ className = "", children, ...props }) {
  return <ol className={["o-breadcrumb__list", className].filter(Boolean).join(" ")} data-slot="breadcrumb-list" {...props}>{children}</ol>;
}
export function BreadcrumbItem({ className = "", children, ...props }) {
  return <li className={["o-breadcrumb__item", className].filter(Boolean).join(" ")} data-slot="breadcrumb-item" {...props}>{children}</li>;
}
/**
 * A breadcrumb segment that navigates. `href` is always required so the link is
 * a real link (copyable, middle-clickable, crawlable).
 *
 * In an app that routes in JavaScript rather than by URL, pass `onSelect`: the
 * click is intercepted, `preventDefault` is called for you, and `onSelect`
 * receives the `href`. Without it an app-routed breadcrumb sets the address bar
 * and moves nowhere, which is the failure this prop exists to prevent.
 */
export function BreadcrumbLink({ className = "", children, onSelect, onClick, ...props }) {
  const handleClick = (event) => {
    if (onClick) onClick(event);
    if (!onSelect || event.defaultPrevented) return;
    event.preventDefault();
    onSelect(props.href, event);
  };
  return <a className={["o-breadcrumb__link", className].filter(Boolean).join(" ")} data-slot="breadcrumb-link" onClick={handleClick} {...props}>{children}</a>;
}
export function BreadcrumbPage({ className = "", children, ...props }) {
  return <span aria-current="page" className={["o-breadcrumb__page", className].filter(Boolean).join(" ")} data-slot="breadcrumb-page" {...props}>{children}</span>;
}
export function BreadcrumbSeparator({ className = "", children }) {
  return <li role="presentation" aria-hidden="true" className={["o-breadcrumb__separator", className].filter(Boolean).join(" ")} data-slot="breadcrumb-separator">{children || CHEVRON}</li>;
}
export function BreadcrumbEllipsis() {
  return (
    <span role="presentation" aria-hidden="true" className="o-breadcrumb__separator" data-slot="breadcrumb-ellipsis">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg>
    </span>
  );
}
