import docs from "./pn-spotlight-docs.json";

export default {
  title: 'Components/CTA/Spotlight',
  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">

        </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">

        </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">

        </div>
    </pn-spotlight>
  </div>
  `;
};

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

Primary.args = {
  heading: 'A Spotlight Moble Header',
  preamble: 'With quick-cta component as content',
  ctaUrl: 'http://www.google.se',
  ctaLabel: 'Read more',
};
