import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant, StoryVariantTable} from '../../docs/utils';

import Flex from '../flex/Flex';
import HomeButton, {TYPE} from './HomeButton';
import HomeButtonA11y from './stories/HomeButton.a11y.mdx';
import PageHeader from 'blocks/PageHeader';

<Meta
  title="Components/HomeButton"
  component={HomeButton}
  argTypes={{
    type: {
      control: {
        type: 'select',
      },
    },
  }}
  args={{
    type: TYPE.BRAINLY,
    href: 'https://brainly.com',
  }}
/>

<PageHeader>HomeButton</PageHeader>

- [Stories](#stories)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story name="Default">{args => <HomeButton {...args} />}</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Types

<Canvas>
  <Story name="Types">
    {args => (
      <Flex wrap>
        {[
          TYPE.BRAINLY,
          TYPE.EODEV,
          TYPE.NOSDEVOIRS,
          TYPE.ZNANIJA,
          TYPE.BRAINLY_PLUS,
        ].map(type => (
          <StoryVariant width={200} label={`type - ${type}`} key={type}>
            <HomeButton {...args} type={type} />
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

## Accessibility

<HomeButtonA11y />