import type { Meta, StoryObj } from '@storybook/svelte';

import Avatar from '$lib/components/atoms/Avatar.svelte';

const meta = {
	title: 'Atoms/Avatar',
	component: Avatar,
	tags: ['autodocs'],
	argTypes: {
		avatar: {
			control: 'text',
			description: 'An URL to the image'
		},
		displayName: {
			control: 'text',
			description: 'If no image is provided, derive initials'
		}
	}
} satisfies Meta<Avatar>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Plain: Story = {
	args: {
		avatar: '',
		displayName: 'Jane Doe'
	}
};

export const ProfilePicture: Story = {
	args: {
		...Plain.args,
		avatar:
			'https://codeberg.org/avatars/a9defc12e1826458289a39e3a66792f0adef29a73fb79b71c66560b7d80aac8f?size=280'
	}
};