import {teasersData} from "./TeasersData";
import {createTeasersSection} from "./TeasersComponent";

export default {
  title: 'Sections/Teasers',
  parameters: {
    layout: 'fullscreen',
  },
  args: {
    type: 'regular',
    background: null,
    headline: 'Schwerpunkt: Die Krise als Chance',
    teasers: teasersData,
    includeChart: false,
    includeSocial: false,
  },
  argTypes: {
    type: {
      name: 'Teaser-Typ',
      control: 'select',
      options: ['regular', 'hero', 'fullwidth', 'text', 'magazine'],
    },
    background: {
      name: 'Hintergrundfarbe',
      control: 'select',
      options: ['white', 'lightblue'],
    },
  }
}

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

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

export const HeroTeasers = Template.bind({});
HeroTeasers.args = {
  type: 'hero',
};

export const MagazineTeasers = Template.bind({});
MagazineTeasers.args = {
  type: 'magazine',
};

export const FullwidthTeaser = Template.bind({});
FullwidthTeaser.args = {
  type: 'fullwidth',
  headline: null,
};

export const IncludeChartTeaser = Template.bind({});
IncludeChartTeaser.args = {
  includeChart: true,
};

export const IncludeSocialTeaser = Template.bind({});
IncludeSocialTeaser.args = {
  includeSocial: true,
};