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

/** Props for the breadcrumbs separator element. */
export interface BreadcrumbsSeparatorProps extends JSX.LiHTMLAttributes<HTMLLIElement> {
	children?: JSX.Element | undefined;
}

/** A decorative separator between breadcrumb items. Hidden from assistive technology. */
export function BreadcrumbsSeparator(props: BreadcrumbsSeparatorProps): JSX.Element {
	const [local, rest] = splitProps(props, ["children"]);

	return (
		<li role="presentation" aria-hidden="true" {...rest}>
			{local.children}
		</li>
	);
}
