import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '../../lib/utils';

const badgeVariants = cva(
  'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border',
  {
    variants: {
      variant: {
        default:
          'border-(--color-border) bg-(--color-surface) text-(--color-fg-muted)',
        info:
          'border-(--color-primary)/30 bg-(--color-primary)/15 text-(--color-primary)',
        success:
          'border-(--color-success)/30 bg-(--color-success-bg) text-(--color-success)',
        warning:
          'border-(--color-warning)/30 bg-(--color-warning-bg) text-(--color-warning)',
        danger:
          'border-(--color-danger)/30 bg-(--color-danger-bg) text-(--color-danger)',
        outline:
          'border-(--color-border) text-(--color-fg)',
      },
    },
    defaultVariants: { variant: 'default' },
  },
);

export interface BadgeProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof badgeVariants> {}

export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant, ...props }, ref) => (
    <span ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
  ),
);
Badge.displayName = 'Badge';
