<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Settings from "$icon/settings";
	import ButtonCard from "./ButtonCard.svelte";

	const { Story } = defineMeta({
		title: "UI/ButtonCard",
		component: ButtonCard,
		tags: ["autodocs"],
		argTypes: {
			variant: {
				control: { type: "select" },
				options: ["default", "ghost"]
			},
			insetShadow: { control: "boolean" },
			disabled: { control: "boolean" },
			title: { control: "text" },
			description: { control: "text" }
		},
		args: {
			variant: "default",
			insetShadow: false,
			disabled: false,
			title: "Button",
			description: "Description"
		}
	});
</script>

<Story name="Default" />
<Story name="Ghost" args={{ variant: "ghost" }} />
<Story name="WithIcon" args={{ icon: Settings }} />
<Story name="Disabled" args={{ disabled: true }} />
<Story name="Href" args={{ href: "/", icon: Settings }} />
<Story name="Inset shadow" args={{ insetShadow: true, icon: Settings }} />

<Story name="Variants">
	<div class="grid grid-cols-2 gap-3">
		<ButtonCard variant="default" icon={Settings} title="Default" description="Bordered card" />
		<ButtonCard variant="ghost" icon={Settings} title="Ghost" description="Transparent card" />
	</div>
</Story>
