import type { Meta, StoryObj } from '@storybook/svelte';
import Badge from './Badge.svelte';

const meta = {
  title: 'UI/Badge',
  component: Badge,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          'Kleine Label-Badge: nur Text (span), als Link (href) oder als Button (onclick). Varianten: default, primary (Wald), accent (Himmel), inactive, date.',
      },
    },
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'primary', 'accent', 'inactive', 'date'],
    },
  },
} satisfies Meta<Badge>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    label: 'Badge',
    variant: 'default',
  },
};

export const Primary: Story = {
  args: {
    label: 'Primär',
    variant: 'primary',
  },
};

export const Accent: Story = {
  args: {
    label: 'Akzent',
    variant: 'accent',
  },
};

export const Inactive: Story = {
  args: {
    label: 'Inaktiv',
    variant: 'inactive',
  },
};

export const Date: Story = {
  args: {
    label: '12.03.2025',
    variant: 'date',
  },
};

export const AsLink: Story = {
  args: {
    label: 'Als Link',
    variant: 'primary',
    href: '#',
  },
};

export const Active: Story = {
  args: {
    label: 'Aktiver Tab',
    variant: 'primary',
    active: true,
  },
};
