import docs from "./pn-quote-card-docs.json";

export default {
  title: 'Components/Cards/Quote Card',
  parameters: {
    notes: docs,
    layout: 'fullscreen',
  },
};

const TemplateQuoteCardQuotePage = ({ ...args }) => {
  return `<pn-breakpoints></pn-breakpoints>

    <div id="bs-col" margin:0 auto">
      <pn-quote-card quote="${args.quote}" name="${args.name}" occupation="${args.occupation}" data-line-color="blue" data-card-style="standalone">
      <pn-line-shape slot="vertical-line"></pn-line-shape>
      <div slot="illustration">
          <picture>
            <img height="105" src="${args.photoUrl}" />
          </picture>
      </div>
        </pn-quote-card>

    </div>

    <div id="bs-col" margin:0 auto">
      <pn-quote-card quote="${args.quote}" name="${args.name}" occupation="${args.occupation}" data-line-color="white" data-card-style="standalone">
      <pn-line-shape slot="vertical-line"></pn-line-shape>
      <div slot="illustration">
          <picture>
            <img height="105" src="${args.photoUrl}" />
          </picture>
      </div>
        </pn-quote-card>

    </div>


    <div id="bs-col" margin:0 auto">
      <pn-quote-card quote="${args.quote}" name="${args.name}" occupation="${args.occupation}" data-line-color="blue900" data-card-style="standalone">
      <pn-line-shape slot="vertical-line"></pn-line-shape>
      <div slot="illustration">
          <picture>
            <img height="105" src="${args.photoUrl}" />
          </picture>
      </div>
        </pn-quote-card>

    </div>
`;
};

export const QuotePage = TemplateQuoteCardQuotePage.bind({});

QuotePage.args = {
  quote: 'Suddenly, we can be one step ahead and help customers track their package. They feel safer and this saves us a lot of time internally. Not least on customer service.',
  photoUrl: 'https://com-inte.postnord.com/globalassets/images/hero-article-photos/smiling-customer-service-worker-with-headset.jpg?width=240&height=240&mode=crop&quality=80',
  name: 'Jenny Jennysson',
  occupation: 'Owner at Headsets for All And some longer text here',
};

const TemplateQuoteCardStartPage = ({ ...args }) => {
  return `
  <pn-breakpoints></pn-breakpoints>
    <div id="view-port-width" style="margin:0 auto; background-color:gray" >
      <div id="bs-container-bleed" >

        <pn-quote-card quote="${args.quote}" name="${args.name}" occupation="${args.occupation}" data-line-color="white" data-card-style="combo">
        <pn-line-shape slot="horizontal-line"></pn-line-shape>
        <div slot="illustration">
            <picture>
              <img height="105" src="${args.photoUrl}" />
            </picture>
        </div>
        <div slot="illustration-big">
            <picture>
              <img height="105" src="${args.photoUrl}" />
            </picture>
        </div>
          </pn-quote-card>

      </div>
    </div>
    `;
};

export const StartPage = TemplateQuoteCardStartPage.bind({});

StartPage.args = {
  quote: 'Suddenly, we can be one step ahead and help customers track their package. They feel safer and this saves us a lot of time internally. Not least on customer service.',
  photoUrl: 'https://com-inte.postnord.com/globalassets/images/hero-article-photos/smiling-customer-service-worker-with-headset.jpg?width=240&height=240&mode=crop&quality=80',
  name: 'Jenny Jennysson',
  occupation: 'Owner at Headsets for All',
};
