import BmsCocarde from './BmsCocarde.vue';

export default {
  title: 'Shared/Cocarde',
  component: BmsCocarde,
};

const Template = (args) => ({
  components: {
    BmsCocarde,
  },
  setup() {
    return { args };
  },
  template: `
  <div style="display: flex; gap: 2em;">
    <div style="display:flex;flex-direction:column;gap:2em">
      <h2>Round</h2>
      <strong>X-Large</strong>
      <BmsCocarde v-bind="args" size="x-large" />
      <strong>Large</strong>
      <BmsCocarde v-bind="args" size="large" />
      <strong>Medium</strong>
      <BmsCocarde v-bind="args" size="medium" />
      <strong>Small</strong>
      <BmsCocarde v-bind="args" size="small" />
    </div>
  
    <div style="display:flex;flex-direction:column;gap:2em">
      <h2>Square</h2>
      <strong>X-Large</strong>
      <BmsCocarde v-bind="args" size="x-large" border="square"/>
      <strong>Large</strong>
      <BmsCocarde v-bind="args" size="large" border="square" />
      <strong>Medium</strong>
      <BmsCocarde v-bind="args" size="medium" border="square" />
      <strong>Small</strong>
      <BmsCocarde v-bind="args" size="small" border="square" />
    </div>
  </div>
  `,
});

export const Default = Template.bind({});
Default.args = {
  initials: 'FG',
};
