import React from 'react';
import { cn } from '@/lib/utils';
import { Badge } from '@/components/ui/badge';

/**
 * PRODUCTION VERSION
 * This is the stable version of the component that is used in the application.
 */
export const StatusBadge = ({ status, label, className }) => {
  const styles = {
    active: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
    inactive: "bg-slate-500/10 text-slate-500 border-slate-500/20",
    warning: "bg-amber-500/10 text-amber-500 border-amber-500/20",
    error: "bg-red-500/10 text-red-500 border-red-500/20"
  };

  return (
    <Badge variant="outline" className={cn("px-4 py-1 font-bold uppercase tracking-wider", styles[status] || styles.inactive, className)}>
      {label || status}
    </Badge>
  );
};
