text: /* eslint-disable @gitlab/require-i18n-strings */
  import PaginationBar from './pagination_bar.vue';
  
  export default {
    component: PaginationBar,
    title: 'vue_shared/components/pagination_bar/pagination_bar',
  };
  
  const Template = (args, { argTypes }) => ({
    components: { PaginationBar },
    props: Object.keys(argTypes),
    template: `<pagination-bar v-bind="$props" v-on="{ 'set-page-size': setPageSize, 'set-page': setPage }" />`,
  });
  
  export const Default = Template.bind({});
  
  Default.args = {
    pageInfo: {
      perPage: 20,
      page: 2,
      total: 83,
      totalPages: 5,
    },
    pageSizes: [20, 50, 100],
  };
  
  Default.argTypes = {
    pageInfo: {
      description: 'Page info object',
      control: { type: 'object' },
    },
    pageSizes: {
      description: 'Array of possible page sizes',
      control: { type: 'array' },
    },
  
    // events
    setPageSize: { action: 'set-page-size' },
    setPage: { action: 'set-page' },
  };
  