import docs from "./pn-filter-checkbox-docs.json";

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

const Template = ({ ...args }) => {
  return `
    <div style="display: flex; align-items: center;">
      <form method="get" target="_blank">
      <pn-filter-checkbox checkboxid="${args.checkboxid}" value="${args.value}" name="${args.name}" checked="${args.checked}" indeterminate="${args.indeterminate}" disabled="${args.disabled}"></pn-filter-checkbox>
      <label style="margin-left: .5em;" for="${args.checkboxid}">${args.value}</label>

      <br/><br/>
      <pn-button type="submit">Submit</pn-button>
      </form>
    </div>
    `;
};

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