// @flow
import React, { type Node } from 'react';
import { action } from '@storybook/addon-actions';
import { NextButton } from './next-button.component';
import docs from './next-button.mdx';

export default {
  component: NextButton,
  title: 'Wizard Buttons/Next Button',
  parameters: {
    fileName: __filename,
    docs: {
      page: docs,
    },
  },
};

const logSubmit = (e) => {
  action('NEXT')();
  e.preventDefault();
};

const Form = ({ children }: { children: Node }) => (
  <form onSubmit={logSubmit}>{children}</form>
);

export const Default = () => (
  <Form>
    <NextButton>Press Enter</NextButton>
  </Form>
);

export const Disabled = () => (
  <Form>
    <NextButton disabled>Press Enter</NextButton>
  </Form>
);
