import * as React from "react";
import { twMerge } from "tailwind-merge";

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'danger' | 'info';
}

const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant = "default", ...props }, ref) => {
    return (
      <span
        ref={ref}
        className={twMerge(
          "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold select-none border tracking-wide uppercase",
          variant === 'default' && "bg-[var(--accent-color)] text-white border-transparent",
          variant === 'secondary' && "bg-[var(--accent-soft)] text-[var(--accent-text)] border-transparent",
          variant === 'success' && "bg-[#10b981]/10 text-[#059669] border-[#10b981]/20",
          variant === 'warning' && "bg-amber-500/10 text-amber-700 border-amber-500/20",
          variant === 'danger' && "bg-red-500/10 text-red-700 border-red-500/20",
          variant === 'info' && "bg-sky-500/10 text-sky-700 border-sky-500/20",
          variant === 'outline' && "text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900",
          className
        )}
        {...props}
      />
    );
  }
);
Badge.displayName = "Badge";

export { Badge };
export default Badge;