import docs from "./pn-hero-block-international-docs.json";

export default {
  title: 'Components/Widgets/Hero Block International',
  parameters: {
    notes: docs,
  },
  argTypes: {
    heading: { control: 'text' },
    subHeading: { control: 'text' },
    preamble: { control: 'text' },
    animateLogo: { control: 'boolean' },
    showSideLoader: { control: 'boolean' },
    centeredLayout: { control: 'boolean' },
    ctaLabel: { control: 'text' },
    ctaUrl: { control: 'text' },
  },
};

const Template = ({ ...args }) => {
  return `
    <pn-hero-block-international heading="${args.heading}" sub-heading="${args.subHeading}" preamble="${args.preamble}" animate-logo="${args.animateLogo}" show-side-loader="${args.showSideLoader}" centered-layout="${args.centeredLayout}">
      <pn-button
        icon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M19.707 11.293a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.586 13H8a1 1 0 1 1 0-2h8.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6ZM5.01 13H5a1 1 0 1 1 0-2h.01a1 1 0 1 1 0 2Z" clip-rule="evenodd"/></svg>'
        slot="hero-international-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
    </pn-hero-block-international>
  `;
};

export const Default = Template.bind({});
Default.args = {
  heading: 'Nordic Deliveries',
  subHeading: '100% coverage of the Nordic market',
  preamble: 'No one can beat us on our home turf.',
  ctaLabel: 'Request a quote',
  ctaUrl: 'https://www.google.com/',
  animateLogo: false,
  showSideLoader: false,
  centeredLayout: false
};

export const WithAnimatedLogo = Template.bind({});
WithAnimatedLogo.args = {
  heading: 'Nordic Deliveries',
  subHeading: '100% coverage of the Nordic market',
  preamble: 'No one can beat us on our home turf.',
  ctaLabel: 'Request a quote',
  ctaUrl: 'https://www.google.com/',
  animateLogo: true,
  showSideLoader: false,
  centeredLayout: false
};

export const WithSideloader = Template.bind({});
WithSideloader.args = {
  heading: 'Nordic Deliveries',
  subHeading: '100% coverage of the Nordic market',
  preamble: 'No one can beat us on our home turf.',
  ctaLabel: 'Request a quote',
  ctaUrl: 'https://www.google.com/',
  animateLogo: false,
  showSideLoader: true,
  centeredLayout: false
};

export const WithAnimatedLogoAndSideloader = Template.bind({});
WithAnimatedLogoAndSideloader.args = {
  heading: 'Nordic Deliveries',
  subHeading: '100% coverage of the Nordic market',
  preamble: 'No one can beat us on our home turf.',
  ctaLabel: 'Request a quote',
  ctaUrl: 'https://www.google.com/',
  animateLogo: true,
  showSideLoader: true,
  centeredLayout: false
};

export const CenteredLayout = Template.bind({});
CenteredLayout.args = {
  heading: 'Nordic Deliveries',
  subHeading: '100% coverage of the Nordic market',
  preamble: 'No one can beat us on our home turf.',
  ctaLabel: 'Request a quote',
  ctaUrl: 'https://www.google.com/',
  animateLogo: false,
  showSideLoader: false,
  centeredLayout: true,
};
