import type { JSX } from "solid-js";
import { splitProps } from "solid-js";

/** Props for the root breadcrumbs navigation container. */
export interface BreadcrumbsRootProps extends JSX.HTMLAttributes<HTMLElement> {
	/** Accessible label for the navigation landmark. @default "Breadcrumbs" */
	"aria-label"?: string | undefined;
	children: JSX.Element;
}

/**
 * Root navigation container for breadcrumbs.
 * Renders a `<nav>` with an `<ol>` list inside.
 */
export function BreadcrumbsRoot(props: BreadcrumbsRootProps): JSX.Element {
	const [local, rest] = splitProps(props, ["aria-label", "children"]);

	return (
		<nav aria-label={local["aria-label"] ?? "Breadcrumbs"} {...rest}>
			<ol>{local.children}</ol>
		</nav>
	);
}