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

/** Props for a breadcrumbs list item. */
export interface BreadcrumbsItemProps extends JSX.LiHTMLAttributes<HTMLLIElement> {
	/** When true, marks this item as the current page via aria-current="page". */
	current?: boolean | undefined;
	children?: JSX.Element | undefined;
}

/** A single item in the breadcrumbs trail. Renders as `<li>`. */
export function BreadcrumbsItem(props: BreadcrumbsItemProps): JSX.Element {
	const [local, rest] = splitProps(props, ["current", "children"]);

	return (
		<li aria-current={local.current ? "page" : undefined} {...rest}>
			{local.children}
		</li>
	);
}
