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

import type { Props as ActionButtonProps } from "./ActionButton.tsx";

import { ActionButton } from "./ActionButton.tsx";

export type Props<Tag extends HTMLTag> = Polymorphic<{
	as?: Tag;
	variant?: "primary" | ActionButtonProps<Tag>["variant"];
	size?: ActionButtonProps<Tag>["size"];
	wide?: boolean;
	justify?: boolean;
	children?: JSX.Element;
}>;

export const Button = <T extends HTMLTag = "a">({ as = "a" as T, variant, ...props }: Props<T>) => (
	<ActionButton
		as={as}
		label-as={variant ? "strong" : "span"}
		pill
		selected={!!variant}
		variant={variant === "primary" ? undefined : variant}
		// deno-lint-ignore no-explicit-any
		{...(props as any)}
	/>
);