import {createEventOverviewStage} from "./EventOverviewStageComponent";
import {eventOverviewStageDataFive, eventOverviewStageDataFour, eventOverviewStageDataThree} from "./EventOverviewStageData";

export default {
  title: 'Sections/EventOverview Stage',
  parameters: {
    layout: 'fullscreen',
  },
  args: {
    backgroundImage: null,
    kicker: 'Das Veranstaltungsportal der IHK Musterstadt',
    headline: 'Veranstaltungsportal',
  },
  argTypes: {
    kicker: {
      name: 'Dachzeile',
    },
    headline: {
      name: 'Überschrift',
    },
    moreCta: {
      name: 'Mehr-Link',
    },
    buttonCta: {
      name: 'Button',
    },
    showProgress: {
      name: 'Fortschritt anzeigen',
    },
    progress: {
      name: 'Fortschritt',
      control: {
        type: 'number',
        min: 0,
        max: 100,
      },
    }
  },
}

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

export const GenericIntro = Template.bind({});
GenericIntro.args = {
  kicker: 'IHK Musterstadt Beteiligungsportal',
};

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

export const EventOverviewStageWithImage = Template.bind({});
EventOverviewStageWithImage.args = {
  backgroundImage: './dummy/hero-veranstaltung-photo.jpg',
}

export const EventOverviewStageWithVideo = Template.bind({});
EventOverviewStageWithVideo.args = {
  video: true,
}

export const EventOverviewStageFive = Template.bind({});
EventOverviewStageFive.args = {
  tiles: eventOverviewStageDataFive
}

export const EventOverviewStageFour = Template.bind({});
EventOverviewStageFour.args = {
  tiles: eventOverviewStageDataFour
}

export const EventOverviewStageThree = Template.bind({});
EventOverviewStageThree.args = {
  tiles: eventOverviewStageDataThree
}
