import { Meta, Story } from '@storybook/react';
import React from 'react';
import {
  IRPGUIContainerProps,
  RPGUIContainer,
  RPGUIContainerTypes,
} from '../../../components/RPGUI/RPGUIContainer';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

const meta: Meta = {
  title: 'UI/RPGUI/RPGUI Container',
  component: RPGUIContainer,
  argTypes: {
    type: {
      control: {
        type: 'select',
        labels: {
          [RPGUIContainerTypes.Framed]: 'framed',
          [RPGUIContainerTypes.FramedGold]: 'framed-gold',
          [RPGUIContainerTypes.FramedGold2]: 'framed-gold-2',
          [RPGUIContainerTypes.FramedGrey]: 'framed-grey',
        },
      },
    },
    children: {},
  },
};

export default meta;

const Template: Story<IRPGUIContainerProps> = args => (
  <RPGUIRoot>
    <RPGUIContainer {...args} />
  </RPGUIRoot>
);

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

Default.args = {
  type: RPGUIContainerTypes.Framed,
  children: <p>This is a container test</p>,
};
