import type { Meta, StoryFn } from '@storybook/react'
import React from 'react'

import { CloseButton } from '.'

type ComponentProps = React.ComponentProps<typeof CloseButton>

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

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

export const Default: StoryFn<ComponentProps> = Template.bind({})
Default.args = {}

export const OnDarkSurface: StoryFn<ComponentProps> = () => (
  <div className="bg-[#121110] p-12">
    <CloseButton onClick={() => undefined} />
  </div>
)