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

import { FaqListItem } from './FaqListItem'
type ComponentProps = React.ComponentProps<typeof FaqListItem>

const meta: Meta<ComponentProps> = {
  title: 'FaqList/FaqListItem',
  component: FaqListItem,
  parameters: {
    layout: 'centered',
    chromatic: { disableSnapshot: true },
  },
}
export default meta

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="w-96 bg-white p-4">
      <FaqListItem {...args} />
    </div>
  )
}

export const Default: StoryFn<ComponentProps> = Template.bind({})
Default.args = {
  question: 'What are your shipping options?',
  onClick: () => console.log('FAQ clicked'),
}

export const Loading: StoryFn<ComponentProps> = Template.bind({})
Loading.args = {
  question: 'What are your shipping options?',
  onClick: () => console.log('FAQ clicked'),
  loading: true,
}