import BmsSidePanel from './BmsSidePanel.vue';

export default {
  title: 'Composants/layout/SidePanel',
  component: BmsSidePanel,
};

const Template = (args) => ({
  components: { BmsSidePanel },
  setup() {
    return { args };
  },
  template: `
    <div style="display: flex; height: 400px; background: var(--bms-background-color, #f5f5f5);">
      <BmsSidePanel v-bind="args">
        <div style="padding: 16px;">
          <p>Contenu du panneau</p>
          <p>Item 1</p>
          <p>Item 2</p>
          <p>Item 3</p>
        </div>
      </BmsSidePanel>
      <div style="flex: 1; padding: 16px;">Contenu principal</div>
    </div>
  `,
});

export const Left = Template.bind({});
Left.args = {
  align: 'left',
  collapsed: false,
};

export const LeftCollapsed = Template.bind({});
LeftCollapsed.args = {
  align: 'left',
  collapsed: true,
};

export const Right = Template.bind({});
Right.args = {
  align: 'right',
  collapsed: false,
};

export const CustomWidth = Template.bind({});
CustomWidth.args = {
  align: 'left',
  collapsed: false,
  width: '400px',
};
