import type { Meta, StoryObj } from '@storybook/vue3'
import { UAvatarGroup } from '../components'

const meta: Meta<typeof UAvatarGroup> = {
  title: 'Example/AvatarGroup',
  component: UAvatarGroup,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['default'],
    },
    size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'] },
    imagePath: { control: 'text' },
    avatarIcon: {
      control: 'select',
      options: [null, 'User1', 'User2', 'User3'],
    },
    profileName: { control: 'text' },
    profileText: { control: 'text' },
    avatarNote: { control: 'text' },
  },
}

export default meta

type Story = StoryObj<typeof UAvatarGroup>

export const Default: Story = {
  render: (args: any) => ({
    components: { UAvatarGroup },
    setup() {
      return { args }
    },
    template: '<UAvatarGroup v-bind="args"></UAvatarGroup>',
  }),
  args: {
    variant: 'default',
    size: 'sm',
    profileName: 'Olivia Rhye',
    profileText: 'olivia@untitledui.com',
    avatarNote: 'OR',
  },
}