import type { Meta, StoryObj } from '@storybook/vue3'
import { UIntegrationIconProps, UIntegrationIcon } from '../components/UIntegrationIcon/UIntegrationIcon'
import { ExtractPropTypes } from 'vue'

const meta: Meta<typeof UIntegrationIcon> = {
  title: 'Example/IntegrationIcon',
  component: UIntegrationIcon,
  tags: ['autodocs'],
  argTypes: {
    icon: {
      control: 'select',
      options: [
        'telegram',
        'whatsapp',
        'viber',
      ],
    },
    size: {
      control: 'select',
      options: [
        'sm',
        'md',
        'lg',
        'xl',
        '2xl',
      ],
    },
  },
}

export default meta

type Story = StoryObj<typeof UIntegrationIcon>

export const BaseIcon: Story = {
  render: (args: ExtractPropTypes<UIntegrationIconProps>) => ({
    components: { UIntegrationIcon },
    setup() {
      args.icon = `${args.icon}`
      return { args }
    },
    template:
      '<UIntegrationIcon v-bind="args" class="mt-10 mb-10 mx-auto"></UIntegrationIcon>',
  }),
  args: {
    icon: 'telegram',
  } as UIntegrationIconProps,
}