import { Story } from '@storybook/react';
import React from 'react';
import {
  IItemInfoDisplayProps,
  ItemInfoDisplay,
} from '../../components/Item/Cards/ItemInfoDisplay';
import { RPGUIRoot } from '../../components/RPGUI/RPGUIRoot';
import atlasJSON from '../../mocks/atlas/items/items.json';
import atlasIMG from '../../mocks/atlas/items/items.png';
import { equipmentSetMock } from '../../mocks/equipmentSet.mocks';
import { items } from '../../mocks/itemContainer.mocks';

export default {
  title: 'Item/Info/Item info',
  component: ItemInfoDisplay,
};

const Template: Story<IItemInfoDisplayProps> = args => (
  <RPGUIRoot>
    <div style={{ margin: '2rem' }}>
      <ItemInfoDisplay {...args} />
    </div>
  </RPGUIRoot>
);

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

Default.args = {
  item: items[0],
  atlasIMG: atlasIMG,
  atlasJSON: atlasJSON,
  equipmentSet: equipmentSetMock,
};
