import {createInfoBanner} from "./InfoBannerComponent";

export default {
  title: 'Sections/Infobanner',
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    kicker: {
      name: 'Links',
      control: {type: 'text'},
      defaultValue: 'Dachzeile des Infobanners',
    },
    headline: {
      name: 'Überschrift',
      control: {type: 'text'},
      defaultValue: 'Überschrift des Infobanners',
    },
    copy: {
      name: 'Kurztext',
      control: {type: 'text'},
      defaultValue: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
    },
    buttonText: {
      name: 'Button-Text',
      control: {type: 'text'},
      defaultValue: 'Call to Action',
    },
    imageSrc: {
      name: 'Bild-Url',
      control: 'text',
      defaultValue: './dummy/placeholder-4-3.svg',
    },
    imageSrcMobile: {
      name: 'Bild-Url mobil',
      control: 'text',
      defaultValue: './dummy/placeholder-3-2.svg',
    },
    isCommercial: {
      name: 'Ist externe Werbung?',
      control: { type: 'boolean' },
    }
  }
}

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

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

export const BannerWithoutImage = Template.bind({});
BannerWithoutImage.args = {
  imageSrc: '',
  imageSrcMobile: '',
};

export const BannerWithoutText = Template.bind({});
BannerWithoutText.args = {
  kicker: '',
  headline: '',
  copy: '',
  buttonText: '',
  isCommercial: true,
};