<script module lang="ts">
	import { defineMeta } from '@storybook/addon-svelte-csf';
	import { type ComponentProps } from 'svelte';
	import Avatar from './Avatar.svelte';
	import AvatarGroups from './AvatarGroup.svelte';

	const { Story } = defineMeta({
		title: 'Data display/Avatar',
		component: Avatar,
		argTypes: {
			img: {
				control: 'text',
			},
			placeholder: {
				control: 'text',
				defaultValue: 'DP',
			},
			presence: {
				control: 'radio',
				options: [undefined, 'online', 'offline'],
			},
			ring: {
				control: 'radio',
				options: [
					undefined,
					'neutral',
					'primary',
					'secondary',
					'accent',
					'info',
					'success',
					'warning',
					'error',
				],
			},
			shape: {
				control: 'radio',
				options: ['square', 'circle'],
				defaultValue: 'circle',
			},
			size: {
				control: 'radio',
				options: ['xs', 'sm', 'md', 'lg', 'xl'],
			},
		},
	});
</script>

{#snippet template(props: Partial<ComponentProps<typeof Avatar>>)}
	<Avatar {...props} placeholder={props.placeholder || 'PC'} />
{/snippet}

<Story
	name="Default"
	args={{
		img: 'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp',
	}}
	children={template}
/>

<Story name="Placeholder" args={{ placeholder: 'BP' }} children={template} />

<Story name="Sizes">
	{@render template({
		size: 'xs',
		placeholder: 'XS',
	})}
	{@render template({
		size: 'sm',
		placeholder: 'SM',
	})}
	{@render template({
		size: 'md',
		placeholder: 'MD',
	})}
	{@render template({
		size: 'lg',
		placeholder: 'LG',
	})}
	{@render template({
		size: 'xl',
		placeholder: 'XL',
	})}
</Story>

<Story name="Avatar Group">
	<AvatarGroups>
		{@render template({ placeholder: 'BP' })}
		{@render template({ placeholder: 'MS' })}
		{@render template({ placeholder: 'DM' })}
	</AvatarGroups>
</Story>