import type { Meta, StoryObj } from '@storybook/react'
import { SvgAdd1 } from '@chainlink/blocks-icons'
import {
  BUTTON_ICON_SIZE_OPTIONS,
  BUTTON_ICON_VARIANT_OPTIONS,
  ButtonIcon,
} from './ButtonIcon'

const meta = {
  title: 'Blocks/ButtonIcon',
  component: ButtonIcon,
  args: {
    asChild: false,
    size: undefined,
    variant: undefined,
  },
  argTypes: {
    asChild: {
      control: 'boolean',
      description: 'Render as a child component using Radix Slot.',
    },
    size: {
      control: {
        type: 'select',
      },
      options: BUTTON_ICON_SIZE_OPTIONS,
      table: {
        type: {
          summary: BUTTON_ICON_SIZE_OPTIONS.map((value) => value).join(' | '),
        },
        defaultValue: { summary: 'default' },
      },
    },
    variant: {
      control: {
        type: 'select',
      },
      options: BUTTON_ICON_VARIANT_OPTIONS,
      table: {
        type: {
          summary: BUTTON_ICON_VARIANT_OPTIONS.map((value) => value).join(
            ' | ',
          ),
        },
        defaultValue: { summary: 'default' },
      },
    },
    onClick: { action: 'clicked' },
  },
} satisfies Meta<typeof ButtonIcon>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => (
    <ButtonIcon {...args}>
      <SvgAdd1 />
    </ButtonIcon>
  ),
}

export const DefaultVariant: Story = {
  name: 'Default Variant',
  render: (args) => (
    <div className="flex items-end gap-4">
      <div className="flex flex-col items-center gap-2">
        <ButtonIcon {...args}>
          <SvgAdd1 />
        </ButtonIcon>
        <span className="text-sm">default</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <ButtonIcon {...args} size="sm">
          <SvgAdd1 />
        </ButtonIcon>
        <span className="text-sm">sm</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <ButtonIcon {...args} size="xs">
          <SvgAdd1 />
        </ButtonIcon>
        <span className="text-sm">xs</span>
      </div>
    </div>
  ),
  args: {
    variant: undefined,
  },
}

export const GhostVariant: Story = {
  name: 'Ghost Variant',
  render: (args) => (
    <div className="flex items-end gap-4">
      <div className="flex flex-col items-center gap-2">
        <ButtonIcon {...args}>
          <SvgAdd1 />
        </ButtonIcon>
        <span className="text-sm">default</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <ButtonIcon {...args} size="sm">
          <SvgAdd1 />
        </ButtonIcon>
        <span className="text-sm">sm</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <ButtonIcon {...args} size="xs">
          <SvgAdd1 />
        </ButtonIcon>
        <span className="text-sm">xs</span>
      </div>
    </div>
  ),
  args: {
    variant: 'ghost',
  },
}