import React from 'react'

import type { Meta } from '@storybook/react'
import { Tag } from '../components'
import { ColorVariant, TextFieldSizeVariant } from '../types'

const colors: ColorVariant[] = [
  'inherit',
  'primary',
  'secondary',
  'success',
  'error',
  'info',
  'warning',
]

const sizes: TextFieldSizeVariant[] = ['small', 'medium']

const meta = {
  title: 'Display/Tag',
  component: Tag,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof Tag>

export default meta

export const TagBasic = () => {
  return (
    <>
      <Tag label="Chip Filled" color="primary" style={{ margin: 5 }} />
      <Tag label="Chip Outlined" outlined style={{ margin: 5 }} />
    </>
  )
}

export const TagColors = () => {
  return (
    <>
      {colors.map((color, key) => (
        <div>
          <Tag label="Chip Filled" color={color} style={{ margin: 5 }} />
          <Tag label="Chip Outlined" color={color} outlined style={{ margin: 5 }} />
        </div>
      ))}
    </>
  )
}

export const TagSizes = () => {
  return (
    <>
      {sizes.map((size, key) => (
        <div>
          <Tag label="Chip Filled" size={size} style={{ margin: 5 }} />
          <Tag label="Chip Outlined" size={size} outlined={true} style={{ margin: 5 }} />
        </div>
      ))}
    </>
  )
}