import './demo1.css';
import React from 'react';
import ReactDOM from 'react-dom';
import SplitButton from '..';
import { Box } from '../..';

const { Item } = SplitButton;
const menu = [ 'Undo', 'Redo', 'Cut', 'Copy', 'Paste' ].map(item => (
  <Item key={item}>{item}</Item>
));

ReactDOM.render(
  <>
    <Box direction="row" align="center" spacing={20} style={{ marginBottom: 20 }}>
      <span className="label">Large:</span>
      <br />
      <SplitButton size="large" label="Edit Document">{menu}</SplitButton>
      <SplitButton size="large" label="Edit Document" type="secondary">{menu}</SplitButton>
    </Box>
    <Box direction="row" align="center" spacing={20} style={{ marginBottom: 20 }}>
      <span className="label">Medium:</span>
      <br />
      <SplitButton size="medium" label="Edit Document">{menu}</SplitButton>
      <SplitButton size="medium" label="Edit Document" type="secondary">{menu}</SplitButton>
    </Box>
    <Box direction="row" align="center" spacing={20} style={{ marginBottom: 20 }}>
      <span className="label">Small:</span>
      <br />
      <SplitButton size="small" label="Edit Document">{menu}</SplitButton>
      <SplitButton size="small" label="Edit Document" type="secondary">{menu}</SplitButton>
    </Box>
    <Box direction="row" align="center" spacing={20} style={{ marginBottom: 20 }}>
      <span className="label">XS:</span>
      <br />
      <SplitButton size="xs" label="Edit Document">{menu}</SplitButton>
      <SplitButton size="xs" label="Edit Document" type="secondary">{menu}</SplitButton>
    </Box>
  </>,
  document.getElementById('split-button-demo-1'),
);