import BmsInputText from '@/components/form/BmsInputText.vue';
import BmsSection from '@/components/layout/BmsSection.vue';

export default {
  title: 'Composants/layout/Section',
  component: BmsSection,
  argTypes: {},
};

const Template = (args) => ({
  components: {
    BmsInputText,
    BmsSection,
  },
  setup() {
    return { args };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: `
  <BmsSection v-bind="args">
    <template #header>
        <h2>Titre de la première section</h2>
    </template>
    <template #default>
    <div>My great content</div>
    <div>My great content</div>
    <div>My great content</div>
    <div>My great content</div>
    <div>My great content</div>
    <div>My great content</div>
        
    </template>
  </BmsSection>
  `,
});

export const Default = Template.bind({});
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
Default.args = {};

export const Bordered = Template.bind({});
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
Bordered.args = {
  style: 'border',
};
