import React from 'react'

import type { Meta } from '@storybook/react'
import { Avatar, Badge, Icons } from '../components'
import { AvatarGroup, Stack } from '@mui/material'

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

export default meta

export const BadgeBasic = () => {
  return (
    <>
      <Badge badgeContent={4} color="primary">
        <Icons icon="user" />
      </Badge>
    </>
  )
}

export const BadgeColors = () => {
  return (
    <Stack direction="row" spacing={2}>
      {['primary', 'secondary', 'default', 'error', 'info', 'success', 'warning'].map(
        (color, key) => (
          <Badge badgeContent={4} color={color} key={key}>
            <Icons icon="user" />
          </Badge>
        ),
      )}
    </Stack>
  )
}