import { select } from '@storybook/addon-knobs';
import * as React from 'react';
import Heading from '.';
import { Stack } from '../../Layout/index';

export default {
  title: 'Components|Text/Heading',
  component: Heading,
};

export const index = () => {
  const color = select(
    'Color',
    {
      'Dark Neutral 1': 'Dark Neutral 1',
      'Mid Neutral 1': 'Mid Neutral 1',
    },
    'Dark Neutral 1',
  );

  return (
    <Stack gap="none">
      <Heading color={color} fontSize="heading.1" as="h1">
        Heading level 1
      </Heading>

      <Heading color={color} fontSize="heading.2" as="h2">
        Heading level 2
      </Heading>

      <Heading color={color} fontSize="heading.3" as="h3">
        Heading level 3
      </Heading>

      <Heading color={color} fontSize="heading.3" as="h3" fontWeight="bold">
        Heading level 3
      </Heading>
    </Stack>
  );
};