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

import {AvatarGroup} from './index';

const meta: Meta<typeof AvatarGroup> = {
  title: 'HuGo/Avatar Group',
  component: AvatarGroup,
  argTypes: {
    size: {control: 'radio', options: ['sm', 'md', 'lg', 'xxl']},
    collapsed: {control: 'boolean'},
  },
};

type Story = StoryObj<typeof AvatarGroup>;

export const AvatarGroupComponent: Story = {
  args: {
    size: 'md',
    collapsed: true,
  },
  render: args => (
    <AvatarGroup
      {...args}
      list={[
        {
          id: 1,
          name: {
            firstName: 'John',
            lastName: 'Doe',
          },
          url: 'https://picsum.photos/seed/picsum/200',
        },
        {id: 2, name: {firstName: 'Jane', lastName: 'Smith'}},
        {id: 3, name: {firstName: 'Robert', lastName: 'Johnson'}},
        {id: 4, name: {firstName: 'Emily', lastName: 'Davis'}},
        {id: 5, name: {firstName: 'Michael', lastName: 'Brown'}},
      ]}
    />
  ),
};

export default meta;