// @flow
import React from 'react';
import styled from 'styled-components';
import { ProgressBar } from './progress-bar.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './progress-bar.mdx';

export default {
  component: ProgressBar,
  title: 'Components/Feedback/Progress Bar',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS = {
  totalSteps: 10,
  currentStep: 2,
};

export const Incomplete = () => <ProgressBar {...DEFAULT_PROPS} />;
export const Complete = () => (
  <ProgressBar {...DEFAULT_PROPS} currentStep={10} />
);
export const Error = () => <ProgressBar {...DEFAULT_PROPS} error />;

const MinWidthProgressBar = styled(ProgressBar)`
  min-width: 100px;
`;
export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={MinWidthProgressBar} {...DEFAULT_PROPS} />
);

export const MixinsStackee = () => (
  <StackeeChecker Component={ProgressBar} {...DEFAULT_PROPS} />
);
