import docs from "./pn-parcel-tracker-docs.json";

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

const TemplatePrimary = ({ data, ...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">${data[0].heading}</h2>
        <div slot="content">
            <pn-parcel-tracker form-action-url="${data[0].actionUrl}" placeholder="${data[0].placeholder}" heading="${data[0].heading}" button-label="${data[0].buttonLabel}" />
        </div>
    </pn-spotlight>
  </div>
    <br />

  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="coral">
        <h2 slot="mobile-heading">${data[1].heading}</h2>
        <div slot="content">
            <pn-parcel-tracker form-action-url="${data[1].actionUrl}" placeholder="${data[1].placeholder}"heading="${data[1].heading}" button-label="${data[1].buttonLabel}" />
        </div>
    </pn-spotlight>
  </div>

  <br/>

  <div id="container" style="margin: 0 auto;">
    <pn-spotlight data-cta-color="green">
        <h2 slot="mobile-heading">${data[2].heading}</h2>
        <div slot="content">
            <pn-parcel-tracker form-action-url="${data[2].actionUrl}" placeholder="${data[2].placeholder}" heading="${data[2].heading}" button-label="${data[2].buttonLabel}" />
        </div>
    </pn-spotlight>
  </div>`;
};

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

Primary.args = {
  data: [
    {
      heading: 'Spåra din försändelse',
      actionUrl: 'https://se-inte.postnord.com/vara-verktyg/spara-brev-paket-och-pall',
      buttonLabel: 'Spåra',
      locale: 'sv',
      placeholder: 'Försändelse-ID',
    },
    {
      heading: 'Track your parcel',
      actionUrl: 'https://com-inte.postnord.com/vara-verktyg/spara-brev-paket-och-pall',
      buttonLabel: 'Track',
      locale: 'en',
      placeholder: 'Enter shipment ID',
    },
    {
      heading: 'Spor din pakke',
      actionUrl: 'https://no-inte.postnord.com/pakkesporing',
      buttonLabel: 'Spor',
      locale: 'no',
      placeholder: 'Sendningsnummer',
    },
  ],
};
