dyolink/frontend/src/components/ui/shared/Badge.tsx

import React from 'react';

export type BadgeVariant = 'success' | 'warning' | 'danger' | 'default';

interface BadgeProps {
  children: React.ReactNode;
  variant?: BadgeVariant;
  className?: string;
  /**
   * Same pixel width for every badge (table columns).
   * Set false only when the pill should shrink to the label.
   */
  fixedWidth?: boolean;
}

const variantStyles: Record<BadgeVariant, string> = {
  success: 'bg-badge-success-bg text-badge-success-fg border-badge-success-border',
  warning: 'bg-badge-warning-bg text-badge-warning-fg border-badge-warning-border',
  danger: 'bg-badge-danger-bg text-badge-danger-fg border-badge-danger-border',
  default: 'bg-badge-default-bg text-badge-default-fg border-badge-default-border',
};

/** Explicit width + height so every row matches; flex centers label optically. */
const FIXED_LAYOUT_CLASS =
  'w-[8rem] min-w-[8rem] max-w-[8rem] shrink-0 h-7 px-2 py-0';

export function Badge({
  children,
  variant = 'default',
  className,
  fixedWidth = true,
}: BadgeProps) {
  const layoutClass = fixedWidth
    ? `${FIXED_LAYOUT_CLASS} justify-center text-center`
    : 'min-h-[1.75rem] px-2.5 py-1 justify-center';

  return (
    <span
      className={`inline-flex items-center box-border rounded-md border text-xs font-medium leading-none whitespace-nowrap ${variantStyles[variant]} ${layoutClass} ${className ?? ''}`}
    >
      {children}
    </span>
  );
}

/** Map organization connection / invitation row status to badge variant. */
export function organizationConnectionStatusVariant(status: string): BadgeVariant {
  switch (status) {
    case 'ACTIVE':
      return 'success';
    case 'PENDING':
      return 'warning';
    case 'REJECTED':
    case 'EXPIRED':
      return 'danger';
    default:
      return 'default';
  }
}