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

export type Props<Tag extends HTMLTag> = Polymorphic<{
	"as"?: Tag;
	"list"?: boolean;
	"quiet"?: boolean;
	"thumbnail"?: boolean;
	"border"?: boolean;
	"no-shadow"?: boolean;
	"horizontal"?: boolean;
	"interactive"?: boolean;
	"highlight"?: boolean;
	"children"?: JSX.Element;
}>;

export const Card = <T extends HTMLTag = "article">({
	as: Tag = "article" as T,
	list,
	quiet,
	thumbnail,
	border,
	"no-shadow": noShadow,
	horizontal,
	interactive,
	highlight,
	class: cls,
	...props
}: Props<T>) => (
	<Tag
		class:list={[
			"o-card",
			{
				"l-card-list__card": list,
				"o-card--borderless": !border,
				"o-card--horizontal": horizontal,
				"o-card--interactive": interactive,
				"o-card--highlight": highlight,
				"o-card--quiet": quiet,
				"o-card--collapsible": Tag === "details",
				"o-card--shadow": !noShadow,
				"o-card--thumbnail": thumbnail,
			},
			cls,
		]}
		{...props}
	/>
);