import docs from "./pn-quick-cta-docs.json";

export default {
  title: 'Components/CTA/Quick CTA',
  parameters: {
    notes: docs,
    layout: 'fullscreen',
  },
};

const TemplatePrimary = ({ ...args }) => {
  return `
   <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>
  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="blue">
        <h2 slot="mobile-heading">${args.heading}</h2>
        <div slot="content">
         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">
            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
         </pn-quick-cta>
        </div>
    </pn-spotlight>
  </div>

  <br/>

  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="coral">
        <h2 slot="mobile-heading">${args.heading}</h2>
        <div slot="content">
         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">
            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
         </pn-quick-cta>
        </div>
    </pn-spotlight>
  </div>

  <br />

  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="green">
        <h2 slot="mobile-heading">${args.heading}</h2>
        <div slot="content">
         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">
            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
         </pn-quick-cta>
        </div>
    </pn-spotlight>
  </div>

  <br />

  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="business">
        <h2 slot="mobile-heading">${args.heading}</h2>
        <div slot="content">
         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">
            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
         </pn-quick-cta>
        </div>
    </pn-spotlight>
  </div>

  <br />

  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="private">
        <h2 slot="mobile-heading">${args.heading}</h2>
        <div slot="content">
         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">
            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
         </pn-quick-cta>
        </div>
    </pn-spotlight>
  </div>

  <br />

  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="hybrid">
        <h2 slot="mobile-heading">${args.headingEmpty}</h2>
        <div slot="content">
         <pn-quick-cta heading="${args.headingEmpty}" preamble="${args.preamble}">
            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
         </pn-quick-cta>
        </div>
    </pn-spotlight>
  </div>

   <br />

  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="hybrid" is-dynamic=true>
        <h2 slot="mobile-heading">Less text</h2>
        <div slot="content">
         <pn-quick-cta heading="Less text" preamble="preamble">
            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
         </pn-quick-cta>
        </div>
    </pn-spotlight>
  </div>

  `;
};

export const Primary = TemplatePrimary.bind({});

Primary.args = {
  heading: 'Interested in sustainable shipping?',
  headingEmpty: '',
  preamble: 'Talk with our experts',
  ctaUrl: 'http://www.google.se',
  ctaLabel: 'Read more',
};
