import { hand_letter_stamp } from 'pn-design-assets/pn-assets/illustrations';
import docs from "./pn-proxio-productcard-docs.json";

export default {
  title: 'Components/Proxio/Product card',
  parameters: {
    notes: docs,
  },
};

const Template = ({ ...args }) => {
  return `
    <div style="max-width: 100rem; margin:1.6rem auto 0;">
      <pn-proxio-productcard>
        <pn-illustration slot="illustrationmobile" illustration='${hand_letter_stamp}' ></pn-illustration>
        <h2 slot="title">${args.heading}</h2>
        <pn-proxio-productcard-description slot="description" heading="${args.description}" highlight="${args.highlight}" list="${args.list}" ></pn-proxio-productcard-description>
        <div slot="information">
          <pn-proxio-productcard-information label="${args.paketlabel}" information="${args.paket}" ></pn-proxio-productcard-information>
          <pn-proxio-productcard-information label="${args.rullelabel}" information="${args.rulle}" ></pn-proxio-productcard-information>
        </div>
        <div slot="bottomtags">
          <pn-titletag color="gray50">${args.usp1}</pn-titletag>
          <pn-titletag color="gray50">${args.usp2}</pn-titletag>
          <pn-titletag color="gray50">${args.usp3}</pn-titletag>
        </div>
        <pn-illustration slot="illustration" illustration='${hand_letter_stamp}' ></pn-illustration>
        <div slot="pricelink">
          <pn-proxio-productcard-pricelink price="${args.price1}" link="${args.link}" linktext="${args.linktext1}" ></pn-proxio-productcard-pricelink>
          <pn-proxio-productcard-pricelink price="${args.price2}" link="${args.link}" linktext="${args.linktext2}" ></pn-proxio-productcard-pricelink>
        </div>
      </pn-proxio-productcard>
    </div>
  `;
};

export const Primary = Template.bind({});
Primary.args = {
  heading: 'Brev',
  description: 'Skicka brev som väger upp till 2 kilo',
  highlight: 'Leverans senast 2 juni 2022',
  list: [
    'Portot betalas med frimärken eller med portkod (digitalt frimärke)',
    'Levereras till postlåda om det får plats, annars till serviceställe',
    'Postas i någon av våra brevlådor eller lämnas in hos ett postombud.',
  ],
  paketlabel: 'Paket:',
  paket: [
    { item1: 'Längd:', item2: 'Max XX cm' },
    { item1: 'Längd + bredd + höjd:', item2: 'Max XX cm' },
  ],
  rullelabel: 'Rulle:',
  rulle: [
    { item1: 'Längd:', item2: 'Max XX cm' },
    { item1: 'Längd + bredd + höjd:', item2: 'Max XX cm' },
  ],
  price1: 'från 14 kronor',
  price2: 'från 13 kronor',
  link: 'www.google.com',
  linktext1: 'Köp portkod',
  linktext2: 'Till butiken',
  usp1: 'usp1',
  usp2: 'usp2',
  usp3: 'usp3',
};
