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

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

<!-- Select's content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="Default">
	<option value="" disabled selected>Select</option>
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
</Story>

<Story name="Filled" args={{ value: "two" }}>
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
</Story>

<Story name="Error" args={{ error: true, value: "two" }}>
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
</Story>

<Story name="Disabled" args={{ disabled: true, value: "one" }}>
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
</Story>

<Story name="States">
	<div class="flex flex-col gap-3">
		<Select>
			<option value="" disabled selected>Select</option>
			<option value="one">One</option>
		</Select>
		<Select value="one">
			<option value="one">One</option>
			<option value="two">Two</option>
		</Select>
		<Select error value="one">
			<option value="one">One</option>
			<option value="two">Two</option>
		</Select>
		<Select disabled value="one">
			<option value="one">One</option>
			<option value="two">Two</option>
		</Select>
	</div>
</Story>
