import type { Meta, StoryObj } from '@storybook/vue3'
import { UBadgeProps } from '../components/UBadge/UBadge'
import { UBadge, UAvatar } from '../components'
import { ExtractPropTypes } from 'vue'

const meta: Meta<typeof UBadge> = {
  title: 'Example/Badge',
  component: UBadge,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['sm', 'md', 'lg'] },
    type: { control: 'select', options: ['default', 'outlined'] },
    color: {
      control: 'select',
      options: [
        'gray',
        'primary',
        'error',
        'warning',
        'success',
        'gray-blue',
        'blue-light',
        'blue',
        'indigo',
        'purple',
        'pink',
        'rose',
        'orange',
      ],
    },
    avatarImagePath: { control: 'text' },
    avatarText: { control: 'text' },
    arrowUp: { control: 'boolean', defaultValue: false },
    arrowRight: { control: 'boolean', defaultValue: false },
    plus: { control: 'boolean', defaultValue: false },
  },
}

export default meta

type Story = StoryObj<typeof UBadge>

export const BaseBadge: Story = {
  render: (args: ExtractPropTypes<UBadgeProps>) => ({
    components: { UBadge, UAvatar },
    setup() {
      return { args }
    },
    template: `<UBadge v-bind="args" class="mt-10 mb-10 mx-auto">Label</UBadge>`,
  }),
  args: {
    size: 'sm',
  } as UBadgeProps,
}