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

import Avatar, { AvatarMaskShape } from './Avatar';

type PagePropsAndCustomArgs = React.ComponentProps<typeof Avatar>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/Avatar',
  component: Avatar,
  argTypes: {
    className: {
      control: { type: 'text' },
    },
    displayName: {
      control: { type: 'text' },
    },
    handle: {
      control: { type: 'text' },
    },
    size: {
      control: { type: 'number' },
    },
    src: {
      control: { type: 'text' },
    },
  },
};

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

export const Default: Story = {
  args: {
    className: 'size-10',
    displayName: 'Dither McVibes',
    handle: 'suno',
    src: 'https://cdn1.suno.ai/defaultBlue.webp',
    size: 40,
  },
};

export const Loading: Story = {
  args: {
    className: 'size-10',
    displayName: 'Dither McVibes',
    handle: 'suno',
    size: 40,
  },
};

export const Persona: Story = {
  args: {
    className: 'size-10',
    displayName: 'Dither McVibes',
    handle: 'suno',
    src: 'https://cdn1.suno.ai/defaultBlue.webp',
    size: 40,
    maskShape: AvatarMaskShape.Persona,
  },
};