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

import { SearchInput } from '.'

type ComponentProps = React.ComponentProps<typeof SearchInput>

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

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="p-12 w-[400px]">
      <SearchInput {...args} />
    </div>
  )
}

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

export const CustomPlaceholder: StoryFn<ComponentProps> = Template.bind({})
CustomPlaceholder.args = {
  placeholder: 'Find a conversation...',
}