<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Pencil from "$icon/pencil";
	import Sun from "$icon/sun";
	import Textarea from "./Textarea.svelte";

	const { Story } = defineMeta({
		title: "UI/Textarea",
		component: Textarea,
		tags: ["autodocs"],
		argTypes: {
			error: { control: "boolean" },
			disabled: { control: "boolean" },
			loading: { control: "boolean" },
			readonly: { control: "boolean" },
			resizeable: { control: "boolean" },
			placeholder: { control: "text" },
			rows: { control: "number" }
		},
		args: {
			error: false,
			disabled: false,
			loading: false,
			readonly: false,
			resizeable: false,
			placeholder: "Placeholder"
		}
	});
</script>

<Story name="Default" />
<Story name="Focus" args={{ autofocus: true, resizeable: false }} />
<Story name="Filled" args={{ value: "Some notes go here" }} />
<Story name="Error" args={{ error: true, value: "Invalid value" }} />
<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
<Story name="Read-only" args={{ readonly: true, value: "Read-only content" }} />
<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
<Story name="With left icon" args={{ iconLeft: Pencil, placeholder: "Write something" }} />
<Story name="With right icon" args={{ iconRight: Sun, placeholder: "Write something" }} />

<Story name="States">
	<div class="flex w-64 flex-col gap-3">
		<Textarea placeholder="Default" />
		<Textarea placeholder="Filled" value="Some notes go here" />
		<Textarea placeholder="Error" error value="Invalid value" />
		<Textarea placeholder="Disabled" disabled value="Can't edit this" />
		<Textarea placeholder="Read-only" readonly value="Read-only content" />
		<Textarea placeholder="Loading" loading value="Checking..." />
	</div>
</Story>
