import docs from './pn-choice-button-docs.json';
import { letterbox_reply_letter_plants, tracking } from 'pn-design-assets/pn-assets/illustrations';

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

const Template = ({ ...args }) => {
  return `
  <fieldset style="margin:0;border:0;padding;">
    <pn-choice-button choiceid="${args.choiceid}" value="${args.value}" name="${args.name}" checked=${true} indeterminate=${args.indeterminate} type=${args.type}>
      <pn-illustration illustration='${letterbox_reply_letter_plants}'></pn-illustration>
      ${args.value}
    </pn-choice-button>
    <pn-choice-button choiceid="${args.choiceid + '2'}" value="${args.value + '2'}" name="${args.name}" indeterminate=${args.indeterminate} type=${args.type}>
      <pn-illustration illustration='${tracking}'></pn-illustration>
      ${args.value} 2
    </pn-choice-button>
  </fieldset>
  `;
};

export const Primary = Template.bind({});
Primary.args = {
  checked: false,
  indeterminate: false,
  choiceid: 'test-id',
  value: 'test value',
  name: 'testname',
  type: 'radio',
};
