import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant} from '../../docs/utils';
import Logo, {TYPE} from './Logo';
import LogoA11y from './stories/Logo.a11y.mdx';
import PageHeader from 'blocks/PageHeader';

<Meta title="Components/Logo" component={Logo} />

<PageHeader>Logo</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### Types

<Canvas>
  <Story name="Types">
    {args => (
      <div>
        {Object.values(TYPE).map(type => {
          const isDark = type.includes('-inverse');
          return (
            <StoryVariant
              dark={isDark}
              whiteText={isDark}
              label={`type - ${type}`}
              key={type}
            >
              <Logo {...args} type={type} />
            </StoryVariant>
          );
        })}
      </div>
    )}
  </Story>
</Canvas>

### Product logos

<Canvas>
  <Story name="ProductLogos">
    {args => (
      <div>
        {Object.values(TYPE)
          .filter(type => type.includes('logo'))
          .map(type => (
            <StoryVariant label={`type - ${type}`} key={type}>
              <Logo {...args} type={type} />
            </StoryVariant>
          ))}
      </div>
    )}
  </Story>
</Canvas>

## Accessibility

<LogoA11y />