import { home, user } from 'pn-design-assets/pn-assets/icons';
import docs from "./pn-customernumber-selector-docs.json";

export default {
  title: 'Components/Profile/Customernumber selector',
  parameters: {
    notes: docs,
    layout: 'fullscreen',
  },
};

const PrimaryTemplate = ({ ...args }) => {
  return `
  <div style="min-width:100%;min-height:100vh;background:#eee;padding:1em;">
    <div style="max-width:15em; background:#fff;">

  <pn-customernumber-selector selected="abc1" heading="Lorem Ipsum" description="123 546 789">
    <pn-customernumber-selector-option id="abc1" heading="John Doe Karlsson (Privat)" description="john.doe.karlsson@hotmail.com" url="?id=123"></pn-customernumber-selector-option>
    <pn-customernumber-selector-option id="12345678" url="?id=12345678">12345678</pn-customernumber-selector-option>
    <pn-customernumber-selector-option id="abc3" heading="Long name company incorporated business practice" description="Kundnr: 1234321" url="?id=123"></pn-customernumber-selector-option>
  </pn-customernumber-selector>

  <pn-sidenav language="${args.language}">
    <pn-sidenav-level>
      <pn-sidenav-link name="Start" href="/" icon='${home}'></pn-sidenav-link>
      <pn-sidenav-link name="Min översikt" icon='${user}' current="true">
        <pn-sidenav-level>
          <pn-sidenav-link name="Leveransadresser" href="/"></pn-sidenav-link>
          <pn-sidenav-link name="Mina beställningar" href="/"></pn-sidenav-link>
          <pn-sidenav-link name="Mina abonnemang" href="/"></pn-sidenav-link>
        </pn-sidenav-level>
      </pn-sidenav-link>
      </pn-sidenav-level>
    </pn-sidenav>


`;
};

export const Primary = PrimaryTemplate.bind({});
Primary.args = {};
