import NotificationItem from '@/plugins/notifications/NotificationItem.vue';

export default {
  title: 'Plugins/Notification/NotificationItem',
  component: NotificationItem,
  argTypes: {},
};

const Template = (args) => ({
  components: {
    NotificationItem,
  },
  setup() {
    return { args };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: `
  <div style="display:flex">
  <NotificationItem v-bind="args" />
  </div>
  `,
});

export const Success = Template.bind({});
Success.args = {
  notification: {
    id: 'id0',
    type: 'success',
    text: 'This is a message',
  },
};

export const SuccessDetails = Template.bind({});
SuccessDetails.args = {
  notification: {
    id: 'id0',
    type: 'success',
    details: 'coucou',
    text: 'This is a message',
  },
};

export const Error = Template.bind({});
Error.args = {
  notification: {
    id: 'id0',
    type: 'error',
    text: 'This is a message',
  },
};

export const ErrorDetails = Template.bind({});
ErrorDetails.args = {
  notification: {
    id: 'id0',
    type: 'error',
    details: 'details',
    text: 'This is a message',
  },
};
