import type { Meta, StoryObj } from "@storybook/react";
import { Badge, Icon } from "@managemate/react";

const meta = {
  title: "Data display/Badge",
  component: Badge,
  tags: ["autodocs"],
} satisfies Meta<typeof Badge>;

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

export const Variants: Story = {
  render: () => (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      <Badge>Default</Badge>
      <Badge variant="brand">Brand</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="solid">Solid</Badge>
    </div>
  ),
};

export const WithDot: Story = {
  render: () => (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      <span className="mmg-badge mmg-badge--success">
        <span className="mmg-badge__dot mmg-badge__dot--pulse" />
        En ligne
      </span>
      <span className="mmg-badge mmg-badge--warning">
        <span className="mmg-badge__dot" />
        En attente
      </span>
      <span className="mmg-badge mmg-badge--danger">
        <span className="mmg-badge__dot" />
        Erreur
      </span>
    </div>
  ),
};

export const WithIcon: Story = {
  render: () => (
    <div style={{ display: "flex", gap: 8 }}>
      <Badge variant="brand"><Icon name="star-fill" size="xs" /> Nouveau</Badge>
      <Badge variant="success"><Icon name="checkbox-circle-fill" size="xs" /> Actif</Badge>
    </div>
  ),
};