import React from 'react';
import {Meta, StoryFn} from "@storybook/react-webpack5";
import {SearchBar, SearchBarProps} from './SearchBar';
import { useState } from 'storybook/preview-api';

export default {
  title: 'organisms/SearchBar',
  component: SearchBar,
  argTypes: {},
} as Meta;

const Template: StoryFn<SearchBarProps> = (args) => {
  const [value, setValue] = useState('');
  const onSearch = (val: any) => {
    setValue(val);
    alert(`onChange value: ${val}`);
  }

  return <>
    <SearchBar {...args} onSearch={onSearch} />
    <div>value: {value}</div>
  </>;
};

export const _SearchBar = Template.bind({});
_SearchBar.args = {}