import { XIcon } from '@phosphor-icons/react'
import type { Meta, StoryFn } from '@storybook/react'
import React from 'react'

import { IconButton } from '.'

type ComponentProps = React.ComponentProps<typeof IconButton>

const meta: Meta<ComponentProps> = {
  title: 'IconButton',
  component: IconButton,
  parameters: {
    layout: 'centered',
    chromatic: { disableSnapshot: true },
  },
  argTypes: {
    onClick: { action: 'clicked' },
  },
}
export default meta

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="p-12">
      <IconButton {...args} />
    </div>
  )
}

export const Default: StoryFn<ComponentProps> = Template.bind({})
Default.args = {
  label: 'Close',
  children: <XIcon className="h-5 w-5" />,
}

export const WithCustomClassName: StoryFn<ComponentProps> = Template.bind({})
WithCustomClassName.args = {
  label: 'Custom styled button',
  children: <XIcon className="h-6 w-6" />,
  className: 'bg-[#7f22fe] text-white size-12',
}