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?: ActionButtonProps<Tag>["variant"];
	pill?: boolean;
	selected?: boolean;
	size?: ActionButtonProps<Tag>["size"];
	children?: JSX.Element;
}>;

export const Badge = <T extends HTMLTag = "span">({ as = "span" as T, ...props }: Props<T>) => (
	// deno-lint-ignore no-explicit-any
	<ActionButton as={as} level="badge" {...(props as any)} />
);