import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import {
  DropdownSelectorContainer,
  IDropdownSelectorContainer,
} from '../../../components/DropdownSelectorContainer';

const meta: Meta = {
  title: 'UI/Dropdowns & Selectors/DropdownSelectorContainer',
  component: DropdownSelectorContainer,
};

export default meta;

const Template: Story<IDropdownSelectorContainer> = args => (
  <RPGUIRoot>
    <DropdownSelectorContainer {...args} details="There are server details" />
  </RPGUIRoot>
);

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

Default.args = {
  title: 'Choose a server',
  onChange: () => {},
  options: [
    {
      id: 'europe-germany',
      name: 'Europe (Germany)',
    },
    {
      id: 'europe-uk',
      name: 'Europe (UK)',
    },
    {
      id: 'america-us',
      name: 'America',
    },
  ],
};
