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

export type Props<Tag extends HTMLTag> = Polymorphic<{
	"as"?: Tag;
	"label-as"?: string;
	"pill"?: boolean;
	"icon"?: JSX.Element;
	"pre"?: JSX.Element;
	"post"?: JSX.Element;
	"highlighted"?: boolean;
	"selected"?: boolean;
	"wide"?: boolean;
	"justify"?: boolean;
	"align-block"?: boolean;
	"level"?: "button" | "badge" | "quiet";
	"variant"?: "accent" | "positive" | "negative" | "warning" | "static-black" | "static-white";
	"size"?: "xs" | "sm" | "lg" | "xl";
	"children"?: JSX.Element;
}>;

export const ActionButton = <T extends HTMLTag = "a">({
	children,
	as: Tag = "a" as T,
	"label-as": Label = "span",
	pill,
	pre,
	post,
	wide,
	justify,
	icon,
	"align-block": alignBlock,
	highlighted,
	selected,
	level,
	variant,
	size,
	class: cls,
	...props
}: Props<T>) => (
	<Tag
		class:list={[
			"o-button",
			{
				"o-button--pill": pill,
				"o-button--wide": wide,
				"o-button--justify": justify,
				"o-button--icon": icon,
				"o-button--align-block": alignBlock,
				"is-highlighted": highlighted,
				"is-selected": selected,
				[`o-button--${level}`]: level && level !== "button",
				[`o-button--${variant}`]: variant,
				[`o-button--${size}`]: size,
			},
			cls,
		]}
		{...props}
	>
		{pre} {icon ?? <Label class="o-button__label">{children}</Label>} {post}
	</Tag>
);