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

	const { Story } = defineMeta({
		title: 'Data Input/Input Field',
		component: InputField,
		argTypes: {
			block: {
				control: 'boolean',
			},
			color: {
				control: 'select',
				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
			},
			disabled: {
				control: 'boolean',
			},
			start: { control: 'text' },
			end: { control: 'text' },
			placeholder: { control: 'text' },
			size: {
				control: 'select',
				options: ['xs', 'sm', 'md', 'lg', 'xl'],
			},
			style: {
				control: 'radio',
				options: [undefined, 'ghost'],
			},
			type: {
				control: 'select',
				options: ['email', 'password', 'search', 'tel', 'text', 'url'],
			},
		},
	});
</script>

<Story name="Default" args={{ name: 'text' }} />

<Story name="Labels">
	<div class="flex flex-col gap-2">
		<InputField name="text" start="Label" />
		<InputField name="text">
			{#snippet start()}
				<User />
			{/snippet}
		</InputField>
		<InputField name="text">
			{#snippet end()}
				<User />
			{/snippet}
		</InputField>
	</div>
</Story>

<Story name="Colors">
	<div class="flex flex-col gap-2">
		<InputField name="text" color="primary" placeholder="Primary" />
		<InputField name="text" color="secondary" placeholder="Secondary" />
		<InputField name="text" color="accent" placeholder="Accent" />
		<InputField name="text" color="neutral" placeholder="Neutral" />
		<InputField name="text" color="info" placeholder="Info" />
		<InputField name="text" color="success" placeholder="Success" />
		<InputField name="text" color="warning" placeholder="Warning" />
		<InputField name="text" color="error" placeholder="Error" />
	</div>
</Story>

<Story name="Sizes">
	<div class="flex flex-col gap-2">
		<InputField name="text" size="xs" placeholder="XS" />
		<InputField name="text" size="sm" placeholder="SM" />
		<InputField name="text" size="md" placeholder="MD" />
		<InputField name="text" size="lg" placeholder="LG" />
		<InputField name="text" size="xl" placeholder="XL" />
	</div>
</Story>

<Story name="Disabled" args={{ name: 'text', placeholder: 'Disabled', disabled: true }} />