import type { Meta, StoryObj } from '@storybook/nextjs-vite'

import { Badge } from './Badge.tsx'

const meta: Meta<typeof Badge> = {
  title: 'Core Components/Badge',
  component: Badge,
}

export default meta

type Story = StoryObj<typeof Badge>

export const Default: Story = {}

export const XS: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      <Badge number={3} color="primary" size="20" />
      <Badge number={3} color="green" size="20" />
    </div>
  ),
}

export const Small: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      <Badge number={3} color="primary" size="24" />
      <Badge number={3} color="green" size="24" />
    </div>
  ),
}
export const Medium: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      <Badge number={3} color="primary" size="28" />
      <Badge number={3} color="green" size="28" />
    </div>
  ),
}
export const Large: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      <Badge number={3} color="primary" size="32" />
      <Badge number={3} color="green" size="32" />
    </div>
  ),
}

export const XL: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      <Badge number={3} color="primary" size="36" />
      <Badge number={3} color="green" size="36" />
    </div>
  ),
}