import type { Meta, StoryObj } from '@storybook/html';
import '@42/styles/badge.css';

interface BadgeArgs {
  label: string;
  variant: 'neutral' | 'accent' | 'success' | 'danger' | 'warning';
}

const meta: Meta<BadgeArgs> = {
  title: 'Presentational/Badge',
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['neutral', 'accent', 'success', 'danger', 'warning'],
    },
    label: { control: 'text' },
  },
  args: { label: 'Badge', variant: 'neutral' },
  render: ({ label, variant }) => {
    const badge = document.createElement('span');
    badge.className = 'c42-badge';
    if (variant !== 'neutral') {
      badge.dataset.variant = variant;
    }
    badge.textContent = label;
    return badge;
  },
};

export default meta;

type Story = StoryObj<BadgeArgs>;

export const Neutral: Story = {};
export const Accent: Story = { args: { variant: 'accent' } };
export const Success: Story = { args: { variant: 'success' } };
export const Danger: Story = { args: { variant: 'danger' } };
export const Warning: Story = { args: { variant: 'warning' } };