import { ComponentStory, ComponentMeta } from '@storybook/react';
import { PaginationLeft } from './index';

export default {
  title: 'Design System/PaginationLeft',
  component: PaginationLeft,
  argTypes: {
    circleSize: {
      control: { type: 'number', min: 1, max: 20 },
    },
    activePage: {
      control: { type: 'number', min: 1, max: 20 },
    },
    hoverColorVariant: {
      options: [
        'transparent',
        'primary',
        'primary-hover',
        'base',
        'base-hover',
        'base-01',
        'base-02',
        'base-02-hover',
        'base-opacity-05',
        'base-opacity-06',
        'body',
        'success',
        'success-01',
        'secondary',
        'secondary-01',
        'secondary-hover',
      ],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof PaginationLeft>;

export const Interactive: ComponentStory<typeof PaginationLeft> = (args) => {
  return <PaginationLeft {...args} />;
};

Interactive.args = {
  pages: 10,
  activePage: 1,
  hoverColorVariant: 'base-01',
};