import {createMarketingHeader} from "./MarketingHeaderComponent";
import {searchData, teaserData, sliderData} from "./MarketingHeaderData";

export default {
  title: 'Sections/MarketingHeader',
  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 createMarketingHeader({...args});
};

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

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

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

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

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