import { Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import {
  ISpellInfoDisplayProps,
  SpellInfoDisplay,
} from '../../../components/Spellbook/cards/SpellInfoDisplay';
import { mockSpells } from '../../../components/Spellbook/mockSpells';

export default {
  title: 'Features/Spells/Spell info',
  component: SpellInfoDisplay,
};

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

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

Default.args = {
  spell: mockSpells[0],
};
