import { box } from 'pn-design-assets/pn-assets/icons';
import docs from "./pn-bonus-progressbar-docs.json";

export default {
  title: 'Components/Input/Bonus progressbar',
  parameters: {
    notes: docs,
    layout: 'centered',
  },
};

const Template = ({ ...args }) => {
  return `
  <div style="width:500px;padding-bottom:100px;">


  <pn-bonus-progressbar value="0"
  icon='${box}'
  theme="blue"
  bonuspercentage="7%"
  heading="Din rabatt p&#229; frim&#228;rken"
  sumtext="Nuvarande ink&#246;pssumma: 0 SEK">
<pn-bonus-progressbar-level value="0" bonuspercentage="7%"></pn-bonus-progressbar-level>
<pn-bonus-progressbar-level value="250001" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
<pn-bonus-progressbar-level value="450001" bonuspercentage="8%"></pn-bonus-progressbar-level>
<pn-bonus-progressbar-level value="900001" bonuspercentage="9%"></pn-bonus-progressbar-level>
<pn-bonus-progressbar-level value="1500001" bonuspercentage="11%"></pn-bonus-progressbar-level>

</pn-bonus-progressbar>

</div>

  <div style="width:380px;margin-bottom:3em;">



  <pn-bonus-progressbar value="477483"
  icon='${box}'
  theme="blue"
  bonuspercentage="8%"
  heading="Din rabatt p&#229; frim&#228;rken"
  sumtext="Nuvarande ink&#246;pssumma: 477483 SEK">
<pn-bonus-progressbar-level value="0" bonuspercentage="7%"></pn-bonus-progressbar-level>
<pn-bonus-progressbar-level value="250001" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
<pn-bonus-progressbar-level value="450001" bonuspercentage="8%"></pn-bonus-progressbar-level>
<pn-bonus-progressbar-level value="900001" bonuspercentage="9%"></pn-bonus-progressbar-level>
<pn-bonus-progressbar-level value="1500001" bonuspercentage="11%"></pn-bonus-progressbar-level>

</pn-bonus-progressbar>


</div>

  `;
};

// const Template = ({ ...args }) => {
//   return `
//   <div style="width:500px;padding-bottom:100px;">

// <pn-bonus-progressbar value="970132"
// icon="stamp"
// theme="red"
// bonuspercentage="17%"
// heading="Din rabatt p&#229; Varor"
// sumtext="Nuvarande summa: 970132 SEK">
// <pn-bonus-progressbar-level value="0" bonuspercentage="14%"></pn-bonus-progressbar-level>
// <pn-bonus-progressbar-level value="15001" bonuspercentage="15%"></pn-bonus-progressbar-level>
// <pn-bonus-progressbar-level value="35001" bonuspercentage="15.5%"></pn-bonus-progressbar-level>
// <pn-bonus-progressbar-level value="70001" bonuspercentage="16%"></pn-bonus-progressbar-level>
// <pn-bonus-progressbar-level value="105001" bonuspercentage="17%"></pn-bonus-progressbar-level>

// </pn-bonus-progressbar>
// </div>
//   <div style="width:380px;margin-bottom:3em;">
//   <pn-bonus-progressbar value="268905"
//                           icon="stamp"
//                           theme="blue"
//                           bonuspercentage="7.5%"
//                           heading="Din rabatt p&#229; frim&#228;rken"
//                           sumtext="268905 SEK">
//             <pn-bonus-progressbar-level value="0" bonuspercentage="7%"></pn-bonus-progressbar-level>
//             <pn-bonus-progressbar-level value="250001" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
//             <pn-bonus-progressbar-level value="450001" bonuspercentage="8%"></pn-bonus-progressbar-level>
//             <pn-bonus-progressbar-level value="900001" bonuspercentage="9%"></pn-bonus-progressbar-level>
//             <pn-bonus-progressbar-level value="1500001" bonuspercentage="11%"></pn-bonus-progressbar-level>

//     </pn-bonus-progressbar>
// </div>

//   `;
// };

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