// @flow
import React from 'react';
import { Head1, Head2, Head3, Head4, Head5 } from './head.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './head.mdx';

export default {
  component: Head1,
  title: '2 - System/Typography/Headings/Head',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => (
  <>
    <Head1>Head 1</Head1>
    <Head2>Head 2</Head2>
    <Head3>Head 3</Head3>
    <Head4>Head 4</Head4>
    <Head5>Head 5</Head5>
  </>
);

export const FontSizes = () => (
  <>
    <Head1 fontSize="f7">Head 1 - f7</Head1>
    <Head1 fontSize="f6">Head 1 - f6</Head1>
    <Head1 fontSize="f5">Head 1 - f5</Head1>
    <Head1 fontSize="f4">Head 1 - f4</Head1>
    <Head1 fontSize="f3">Head 1 - f3</Head1>
    <Head1 fontSize="f2">Head 1 - f2</Head1>
    <Head1 fontSize="f1">Head 1 - f1</Head1>
  </>
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={Head1} fontSize="f2">
      Head 2 f2
    </MarginChecker>
    <PaddingChecker Component={Head1} fontSize="f2">
      Head 2 f2
    </PaddingChecker>
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker Component={Head1} fontSize="f2">
    Head 2 f2
  </StackeeChecker>
);
