import type { HTMLAttributes, ReactNode, ReactElement } from "react";

export type BadgeVariant =
  | "priority-high"
  | "priority-medium"
  | "priority-low"
  | "status-success"
  | "status-warning"
  | "status-error"
  | "status-info"
  | "status-neutral";

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
  children: ReactNode;
}

const variantStyles: Record<BadgeVariant, string> = {
  "priority-high": "bg-red-100 text-red-800 border-red-200",
  "priority-medium": "bg-yellow-100 text-yellow-800 border-yellow-200",
  "priority-low": "bg-green-100 text-green-800 border-green-200",
  "status-success": "bg-green-100 text-green-800 border-green-200",
  "status-warning": "bg-yellow-100 text-yellow-800 border-yellow-200",
  "status-error": "bg-red-100 text-red-800 border-red-200",
  "status-info": "bg-blue-100 text-blue-800 border-blue-200",
  "status-neutral": "bg-gray-100 text-gray-800 border-gray-200",
};

export function Badge({
  variant = "status-neutral",
  children,
  className = "",
  ...props
}: BadgeProps): ReactElement {
  const baseStyles =
    "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border";
  const combinedClassName = [baseStyles, variantStyles[variant], className]
    .filter(Boolean)
    .join(" ");

  return (
    <span className={combinedClassName} role="status" aria-label={children as string} {...props}>
      {children}
    </span>
  );
}