import React from 'react';
import {Meta, StoryObj} from '@storybook/react';
import {IconHome} from '@tabler/icons-react-native';

import {Avatar} from './index';

const argTypes = {
  variant: {
    control: 'radio',
    options: ['default', 'primary', 'highlight', 'success', 'error', 'warning'],
  },
  size: {control: 'radio', options: ['xs', 'sm', 'md', 'lg']},
  rounded: {control: 'boolean'},
  borderVariant: {control: 'radio', options: ['none', 'live']},
};

const meta: Meta<typeof Avatar> = {
  title: 'HuGo/Avatar',
  component: Avatar,
  argTypes,
};

type Story = StoryObj<typeof Avatar>;

export const AvatarComponent: Story = {
  argTypes: {
    ...argTypes,
    name: {control: 'text'},
    url: {control: 'text'},
  },
  args: {
    variant: 'default',
    size: 'md',
    name: '',
    url: undefined,
    rounded: true,
    borderVariant: 'none',
  },
};

export const AvatarIcon: Story = {
  args: {
    variant: 'default',
    size: 'md',
    rounded: true,
  },
  render: args => <Avatar {...args} Icon={IconHome} />,
};

export default meta;
