import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import { IListMenuProps, ListMenu } from '../../../components/ScrollList';

const meta: Meta = {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'UI/Lists/Scroll List',
  component: ListMenu,
  argTypes: {},
};

export default meta;

//👇 We create a “template” of how args map to rendering "Blacksmith","Merchant","City Guard","Explorer"
const Template: Story<IListMenuProps> = args => (
  <RPGUIRoot>
    <ListMenu {...args} />
  </RPGUIRoot>
);

export const Default = Template.bind({});

Default.args = {
  title: 'Scroll List',
  // x: 100,
  // y: 100,
  options: [
    {
      id: 'blacksmith',
      text: 'Huge option added here',
    },
    {
      text: 'Merchant',
      id: 'merchant',
    },
    {
      text: 'City Guard',
      id: 'city-guard',
    },
    {
      text: 'Explorer',
      id: 'explorer',
    },
    {
      text: 'Royalty',
      id: 'royalty',
    },
    {
      text: 'Gladiator',
      id: 'gladiator',
    },
    {
      id: 'blacksmith',
      text: 'Huge option added here',
    },
    {
      text: 'Merchant',
      id: 'merchant',
    },
    {
      text: 'City Guard',
      id: 'city-guard',
    },
    {
      text: 'Explorer',
      id: 'explorer',
    },
    {
      text: 'Royalty',
      id: 'royalty',
    },
    {
      text: 'Gladiator',
      id: 'gladiator',
    },
    {
      text: 'Gladiator',
      id: 'gladiator',
    },
  ],
};
