import docs from "./pn-product-tile-docs.json";

export default {
  title: 'Components/Widgets/Product Tile',
  parameters: {
    notes: docs,
  },
};

const Template = ({ ...args }) => {
  return `
    <div style="max-width: 30em; margin:1em auto 0;">
      <pn-product-tile>
        <div slot="content">
          <h3>${args.heading}</h3>
          <p>${args.description}</p>
        </div>
        <pn-product-tile-info label="${args.info1label}" text="${args.info1value}"></pn-product-tile-info>
        <pn-product-tile-info label="${args.info2label}" text="${args.info2value}"></pn-product-tile-info>
        <pn-product-tile-price slot="price" label="${args.pricelabel}" amount="${args.priceamount}" currency="${args.pricecurrency}"></pn-product-tile-price>
      </pn-product-tile>
    </div>
  `;
};

export const Primary = Template.bind({});
Primary.args = {
  heading: 'Skicka hem',
  description: 'Lorem ipsum dolor sit amet',
  info1label: 'Maxvikt',
  info1value: '250g',
  info2label: 'Max längd + bredd + höjd',
  info2value: '90cm',
  pricelabel: 'Skicka direkt',
  priceamount: '52',
  pricecurrency: 'kr',
};

export const Secondary = Template.bind({});
Secondary.args = {
  heading: '',
  description: '',
  info1label: 'Maxvikt',
  info1value: '250g',
  info2label: 'Max längd + bredd + höjd',
  info2value: '90cm',
  pricelabel: 'Skicka direkt',
  priceamount: '52',
  pricecurrency: 'kr',
};
