import React from 'react';
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';
import { MdCheck } from '@react-icons/all-files/md/MdCheck';

import SellingPoints from '.';

export default {
  title: 'Theme/Atoms/Selling Points',
  component: SellingPoints,
  argTypes: {
    sellingPoints: {
      name: 'sellingPoints',
      type: { name: 'array', required: false },
      defaultValue: null,
      description: 'Array of selling points',
      table: {
        type: { summary: 'array' },
        defaultValue: { summary: null },
      },
    },
    icon: {
      name: 'icon',
      type: { name: 'element', required: false },
      defaultValue: null,
      description: 'Icon for each list item.',
      table: {
        type: { summary: 'element' },
        defaultValue: { summary: null },
      },
      control: {
        type: null,
      },
    },
    limit: {
      name: 'limit',
      type: { name: 'number', required: false },
      defaultValue: 3,
      description: 'Limit the amount of items in the list.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 3 },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'An unordered list typically used in toplists. Optional icon for the list items. Can set a limit for the amount of items.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => <SellingPoints {...args} />;

export const Default = Template.bind({});
Default.args = {
  sellingPoints: [
    'Great games',
    'Fast speed',
    'Fast payout',
    'Mobile friendly',
    'Easy to use',
    'Great bonuses',
    'Fun',
    'Loyalty scheme',
  ],
  icon: <MdCheck />,
  limit: 3,
};
