import type { Meta, StoryObj } from '@storybook/react-vite';

import { generateSvgPlaceholder } from '../../utils/storybook';

import { Avatar } from './Avatar';

const meta: Meta<typeof Avatar> = {
  title: 'UI kit/Avatar',
  component: Avatar,
  tags: ['autodocs'],
};

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

export const Default: Story = {
  args: {
    description: 'React Developer',
    name: 'Jane Doe',
    src: generateSvgPlaceholder(200, 200),
  },
};
Default.storyName = 'Image, name and description';

export const ImageFallbackAndNameAndDescription: Story = {
  args: {
    description: 'React Developer',
    name: 'Jane Doe',
  },
};
ImageFallbackAndNameAndDescription.storyName = 'Image fallback, name and description';

export const ImageAndName: Story = {
  args: {
    name: 'Jane Doe',
    src: generateSvgPlaceholder(200, 200),
  },
};
ImageAndName.storyName = 'Image and name';

export const FallbackAndName: Story = {
  args: {
    name: 'Jane Doe',
  },
};
FallbackAndName.storyName = 'Image fallback and name';

export const ImageOnly: Story = {
  args: {
    name: 'Jane Doe',
    src: generateSvgPlaceholder(200, 200),
    variant: 'image',
  },
};
ImageOnly.storyName = 'Image only';

export const FallbackOnly: Story = {
  args: {
    name: 'Jane Doe',
    variant: 'image',
  },
};
FallbackOnly.storyName = 'Image fallback only';

export const NameAndDescription: Story = {
  args: {
    description: 'React Developer',
    name: 'Jane Doe',
    variant: 'text',
  },
};
NameAndDescription.storyName = 'Name and description';

export const NameOnly: Story = {
  args: {
    name: 'Jane Doe',
    variant: 'text',
  },
};
NameOnly.storyName = 'Name only';