import * as React from 'react';

import { cn } from '@workspace/ui/lib/utils';

// Define types for badge variants
type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'info';

interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
}

export function Badge({ className, variant = 'default', ...props }: BadgeProps) {
  // Define styles based on variant
  const variantStyles = {
    default: 'bg-primary text-primary-foreground shadow-xs',
    secondary: 'bg-secondary text-secondary-foreground shadow-xs',
    destructive: 'bg-destructive text-destructive-foreground shadow-xs',
    outline: 'border text-foreground',
    success: 'bg-green-500/10 text-green-500 border-green-500/30 dark:border-green-500/50 dark:bg-green-500/20 dark:text-green-300',
    info: 'bg-blue-500/10 text-blue-500 border-blue-500/30 dark:border-blue-500/50 dark:bg-blue-500/20 dark:text-blue-300',
  };

  return (
    <span
      className={cn(
        "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
        variantStyles[variant],
        className
      )}
      {...props}
    />
  );
}