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

export type Props = HTMLAttributes<"ul"> & {
	"layout"?:
		| "merge"
		| "grid"
		| "grid-sm"
		| "grid-xs"
		| "flex"
		| "flex-sm"
		| "flex-xs"
		| "masonry"
		| "masonry-h"
		| "masonry-h-sm";
	"quiet"?: boolean;
	"border"?: boolean;
	"interactive"?: boolean;
	"no-shadow"?: boolean;
	"no-flush"?: boolean;
	"keyboard-nav"?: boolean;
};

export const CardList = ({
	layout,
	quiet,
	border,
	interactive,
	"no-shadow": noShadow,
	"no-flush": noFlush,
	"keyboard-nav": keyboardNav,
	class: cls,
	...props
}: Props) => (
	<div
		class:list={[
			"l-card-list",
			{
				[`l-card-list--${layout}`]: layout,
				"l-card-list--interactive": interactive,
				"l-card-list--no-flush": noFlush,
				"l-card-list--quiet": quiet,
				"l-card-list--borderless": !border,
				"l-card-list--shadow": layout === "merge" && !noShadow,
				"js-keyboard-nav": keyboardNav,
			},
			cls,
		]}
		data-keyboard-nav-item=".l-card-list__card"
		data-keyboard-nav-mode="grid"
		{...props}
	/>
);