import {createSearch} from "./SearchComponent";
import {searchData} from "./SearchData";

export default {
  title: 'Sections/Search',
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    artworkStyle: {
      name: 'Artwork Stil',
      control: {type: 'select'},
      options: ['artwork', 'artwork-image', 'artwork-background-image'],
      defaultValue: 'artwork',
    },
    headline1: {
      name: 'Überschrift Zeile 1',
      control: {type: 'text'},
      defaultValue: 'Willkommen bei Ihrer IHK.',
    },
    headline2: {
      name: 'Überschrift Zeile 2',
      control: {type: 'text'},
      defaultValue: 'Wie können wir Ihnen helfen?',
    },
    placeholder: {
      name: 'Platzhalter',
      control: {type: 'text'},
      defaultValue: 'Tippe "Taxischein" für Autocomplete',
    },
    tiles: {
      name: 'Kacheln',
      control: {type: 'object'},
      defaultValue: searchData,
    }
  }
}

const Template = ({...args}) => {
  return createSearch({...args});
};

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