import {createParticipationStage} from "./ParticipationStageComponent";

export default {
  title: 'Sections/Participation Stage',
  parameters: {
    layout: 'fullscreen',
  },
  args: {
    imageSrc: './dummy/placeholder-4-3.svg',
    kicker: 'Noch 7 Tage offen',
    headline: 'Jetzt und digital mitreden',
    copy: 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
    copyright: 'Copyright',
    moreCta: {
      label: 'Mehr Infos',
      link: '#',
      target: '_self',
    },
    buttonCta: {
      label: 'Jetzt beteiligen',
      link: '#',
      target: '_self',
    },
    showProgress: true,
    progress: 60,
  },
  argTypes: {
    imageSrc: {
      name: 'Bild-Url',
    },
    kicker: {
      name: 'Dachzeile',
    },
    headline: {
      name: 'Überschrift',
    },
    copy: {
      name: 'Kurztext',
    },
    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 createParticipationStage({...args});
};

export const GenericIntro = Template.bind({});
GenericIntro.args = {
  imageSrc: null,
  kicker: 'IHK Musterstadt Beteiligungsportal',
  showProgress: false,
  buttonCta: {
    label: 'Mehr erfahren',
    link: '#',
    target: '_self',
  },
  moreCta: null,
};

export const GenericParticipation = Template.bind({});
GenericParticipation.args = {
  imageSrc: null,
}

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

export const ParticipationWithBackgroundImage = Template.bind({});
ParticipationWithBackgroundImage.args = {
  imageSrc: null,
  backgroundImage: './logos/election-header.jpg',
}

export const ParticipationFirstElement = Template.bind({});
ParticipationFirstElement.args = {
  isFirstElement: true,
}