// @flow
import React from 'react';
import { CircularProgressBar } from './index';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import docs from './circular-progress-bar.mdx';

export default {
  component: CircularProgressBar,
  title: 'Feedback UI/Circular Progress Bar',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS = {
  initialAnimation: true,
  percentage: 50,
};

export const Default = () => <CircularProgressBar {...DEFAULT_PROPS} />;

export const Complete = () => <CircularProgressBar {...DEFAULT_PROPS} />;

export const Large = () => (
  <CircularProgressBar {...DEFAULT_PROPS} size="60px" />
);

export const NoAnimation = () => (
  <CircularProgressBar {...DEFAULT_PROPS} initialAnimation={false} />
);

export const ErrorColors = () => (
  <CircularProgressBar
    {...DEFAULT_PROPS}
    percentage={100}
    color="error-fg"
    bgColor="error-bg"
  />
);

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={CircularProgressBar} {...DEFAULT_PROPS} />
);
