import type { HTMLAttributes, HTMLTag } from "corvos/plugins/jsx.ts";

export type Props = HTMLAttributes<"div" | "hr"> & {
	"level"?: "strong" | "medium" | "quiet" | "faint";
	"variant"?: "static-black" | "static-white";
	"vertical"?: boolean | "dot";
	"label-as"?: HTMLTag;
	"children"?: JSX.Element;
};

export const Divider = ({
	children,
	level = "strong",
	variant,
	vertical,
	"label-as": Label = "span",
	class: cls,
	...props
}: Props) =>
	children ? (
		<div
			class:list={[
				"o-divider",
				"o-divider--labelled",
				`o-divider--${level}`,
				{
					[`o-divider--${variant}`]: variant,
					"o-divider--vertical": vertical === true,
					"o-divider--dot": vertical === "dot",
				},
				cls,
			]}
			{...props}
		>
			<Label class="o-divider__label u-mbs-0">{children}</Label>
		</div>
	) : (
		<hr
			class:list={[
				"o-divider",
				`o-divider--${level}`,
				{
					[`o-divider--${variant}`]: variant,
					"o-divider--vertical": vertical === true,
					"o-divider--dot": vertical === "dot",
				},
				cls,
			]}
			{...props}
		/>
	);