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

	const { Story } = defineMeta({
		title: "UI/Logo",
		component: Logo,
		tags: ["autodocs"],
		argTypes: {
			wordmark: { control: "boolean" }
		},
		args: {
			wordmark: false
		}
	});
</script>

<Story name="Icon" />
<Story name="Wordmark" args={{ wordmark: true }} />

<Story name="Both" asChild>
	<div class="flex flex-col items-start gap-4">
		<Logo />
		<Logo wordmark />
	</div>
</Story>

<Story name="Colors" asChild>
	<div class="flex flex-col items-start gap-4">
		<Logo class="text-foreground-muted" />
		<Logo class="text-foreground-success" />
		<Logo class="text-foreground-danger" />
		<Logo class="text-foreground-info" />
		<Logo class="text-foreground-warning" />
	</div>
</Story>

<Story name="Wordmark Colors" asChild>
	<div class="flex flex-col items-start gap-4">
		<Logo wordmark class="text-foreground-muted" />
		<Logo wordmark class="text-foreground-success" />
		<Logo wordmark class="text-foreground-info" />
	</div>
</Story>

<Story name="On Emphasis" asChild>
	<div class="bg-background-success-emphasis flex flex-col items-start gap-4 rounded p-4">
		<Logo class="text-foreground-on-emphasis" />
		<Logo wordmark class="text-foreground-on-emphasis" />
	</div>
</Story>
