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

	const { Story } = defineMeta({
		title: "UI/Thumbnail",
		component: Thumbnail,
		tags: ["autodocs"],
		argTypes: {
			title: { control: "text" }
		},
		args: {
			title: "Design System"
		}
	});
</script>

<Story name="Default">
	<div class="w-96">
		<Thumbnail />
	</div>
</Story>

<Story name="Custom content">
	<div class="w-96">
		<Thumbnail>
			<span class="text-2xl font-bold text-foreground-default sm:text-3xl">Thumbnail</span>
		</Thumbnail>
	</div>
</Story>
