<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Card from "./Card.svelte";

	const { Story } = defineMeta({
		title: "UI/Card",
		component: Card,
		tags: ["autodocs"],
		argTypes: {
			border: { control: "boolean" },
			shadow: { control: "boolean" },
			background: { control: "boolean" },
			padding: { control: { type: "select" }, options: ["default", "sm", "none"] }
		},
		args: {
			border: true,
			shadow: false,
			background: true,
			padding: "default"
		}
	});
</script>

<!-- Card content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="Default">Card content</Story>
<Story name="Elevated" args={{ shadow: true }}>Bordered card with shadow</Story>
<Story name="Plain" args={{ border: false, background: false, shadow: false, padding: "none" }}>
	Borderless, shadowless, background-less
</Story>

<Story name="Variants">
	<div class="flex flex-col gap-4">
		<Card border shadow={false} background>Bordered, no shadow (profile / settings)</Card>
		<Card border shadow background>Bordered + shadow (elevated)</Card>
		<Card border={false} shadow={false} background={false} padding="none"
			>Plain (timeline)</Card
		>
	</div>
</Story>
