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

	const { Story } = defineMeta({
		title: 'Actions/Dropdown',
		component: Dropdown,
		argTypes: {
			hover: {
				control: 'boolean',
			},
			open: {
				control: 'boolean',
			},
		},
	});
</script>

<Story name="Dropdown Menu">
	<Dropdown>
		{#snippet title()}
			Click me!
		{/snippet}
		<ul class={'menu bg-base-200 rounded-box w-56'}>
			<li><a>Item 1</a></li>
			<li><a>Item 2</a></li>
			<li><a>Item 3</a></li>
		</ul>
	</Dropdown>
</Story>

<Story name="Dropdown Card">
	<Dropdown>
		{#snippet title()}
			Click me!
		{/snippet}
		<div class="card card-sm bg-base-100 z-1 w-64 shadow-md">
			<div class="card-body">
				<h2 class="card-title">You needed more info?</h2>
				<p>This is a card. You can use any element as a dropdown.</p>
			</div>
		</div>
	</Dropdown>
</Story>