import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Badge } from './Badge';
import { Box } from '../Box/Box';
import { Button } from '../Button/Button';

<Meta title="Components/Badge/Overview" component={Badge} />

# Badge

Badges are used to display the status of an object or of an action that’s been taken.

<Canvas isExpanded>
  <Badge variant="default" message="Hello world!" />
</Canvas>

## Props

<ArgsTable of={Badge} />

## Variants

Badges come in different variants based on the kind of message being delivered to the user.

<Canvas>
  <Story
    name="Variants"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=117%3A2228',
      },
    }}
  >
    {() => {
      const variants = [
        'default',
        'primary',
        'secondary',
        'tertiary',
        'info',
        'success',
        'warning',
        'danger',
      ];
      return (
        <Box direction="row" gap="sm">
          {variants.map(variant => (
            <Badge message={variant} variant={variant} key={variant} />
          ))}
        </Box>
      );
    }}
  </Story>
</Canvas>

## Sizes

Set the size of the badge to `sm`, `md`, `lg` or `xl`. `md` is the default size. A `ResponsiveProp` object may also be used
so the badge can be a different size per breakpoint.

<Canvas>
  <Story name="Sizes">
    {() => {
      return (
        <>
          <Box direction="column" alignItems="flex-start" gap="md">
            <Badge size="sm" message="Small" />
            <Badge size="md" message="Medium" />
            <Badge size="lg" message="Large" />
            <Badge size="xl" message="X-Large" />
            <Badge
              size={{
                base: 'sm',
                tablet: 'md',
                desktop: 'lg',
                hd: 'xl',
              }}
              message="Responsive"
            />
          </Box>
        </>
      );
    }}
  </Story>
</Canvas>
