<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import ArrowRight from "$icon/arrow-right";
	import ExternalLink from "$icon/external-link";
	import Link from "./Link.svelte";

	const { Story } = defineMeta({
		title: "UI/Link",
		component: Link,
		tags: ["autodocs"],
		argTypes: {
			variant: {
				control: { type: "select" },
				options: ["default", "success", "warning", "danger"]
			},
			size: {
				control: { type: "inline-radio" },
				options: ["regular", "small"]
			},
			disabled: { control: "boolean" }
		},
		args: {
			variant: "default",
			size: "regular",
			disabled: false
		}
	});
</script>

<!-- Link content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="Default">Link</Story>
<Story name="Success" args={{ variant: "success" }}>Confirmed</Story>
<Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
<Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
<Story name="Small" args={{ size: "small" }}>Small link</Story>
<Story name="Disabled" args={{ disabled: true }}>Link</Story>

<Story name="IconLeft" args={{ iconLeft: ExternalLink }}>Open in new tab</Story>
<Story name="IconRight" args={{ iconRight: ArrowRight }}>Continue</Story>

<Story name="Href" args={{ href: "/" }}>Go home</Story>

<Story name="Variants">
	<div class="flex items-center gap-4">
		<Link variant="default">Default</Link>
		<Link variant="success">Success</Link>
		<Link variant="warning">Warning</Link>
		<Link variant="danger">Danger</Link>
	</div>
</Story>

<Story name="Sizes">
	<div class="flex items-center gap-4">
		<Link size="regular">Regular</Link>
		<Link size="small">Small</Link>
	</div>
</Story>
