import { createTheme, ThemeProvider } from '../Theme';
import ActionButton from '.';

export default {
  title: 'Deprecated/ActionButton',

  parameters: {
    readme: {
      sidebar: '<!-- PROPS -->',
    },
  },
};

export function WithDifferentColor() {
  return (
    <ThemeProvider theme={createTheme()}>
      <div>
        <ActionButton href="/" theme="inherit">
          Default Button
        </ActionButton>
        <ActionButton href="/" theme="primary">
          Primary Button
        </ActionButton>
        <ActionButton href="/" theme="secondary">
          Secondary Button
        </ActionButton>
        <ActionButton href="/" theme="reverse">
          Reverse Button
        </ActionButton>
      </div>
    </ThemeProvider>
  );
}

WithDifferentColor.storyName = 'with different color';

export function WithDifferentVariant() {
  return (
    <ThemeProvider theme={createTheme()}>
      <div>
        <ActionButton href="/" variant="text">
          Text Button
        </ActionButton>
        <ActionButton href="/" variant="outlined">
          Outlined Button
        </ActionButton>
        <ActionButton href="/" variant="contained">
          Contained Button
        </ActionButton>

        <div style={{ background: '#222', padding: 12, marginTop: 24 }}>
          <ActionButton href="/" variant="contained" theme="reverse">
            Contained Reverse Button
          </ActionButton>
        </div>
      </div>
    </ThemeProvider>
  );
}

WithDifferentVariant.storyName = 'with different variant';
