import { Box } from '@mui/material';

import SplitButton from './index';
import Basic from './demo/basic';
import ThemeProvider from '../Theme/theme-provider';
import ThemeModeToggle from '../Config/theme-mode-toggle';

export default {
  title: 'Basic/SplitButton',
  component: SplitButton,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=768%3A999',
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider prefer="system">
        <Box sx={{ py: 1 }}>
          <ThemeModeToggle />
        </Box>
        <Story />
      </ThemeProvider>
    ),
  ],
};

// single story hoisting
Basic.storyName = 'SplitButton';

export { Basic };
