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

export interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
	children?: JSX.Element;
}

/** An alert element that announces important messages to screen readers via role="alert". */
export function Alert(props: AlertProps): JSX.Element {
	const [local, rest] = splitProps(props, ["children"]);
	return (
		<div role="alert" {...rest}>
			{local.children}
		</div>
	);
}