import {fn} from 'storybook/test'

import {
  Search,
  SearchInput,
  SearchProvider,
  SearchResultsList,
} from '../components'

import type {Meta, StoryObj} from '@storybook/react-vite'

const meta = {
  title: 'Commerce/Search',
  component: Search,
  parameters: {
    layout: 'padded',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Search>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    onProductClick: fn(),
  },
}

export const Composite: Story = {
  render: args => (
    <SearchProvider {...args}>
      <SearchInput placeholder="Search..." />
      <SearchResultsList />
    </SearchProvider>
  ),
}
