import type { ReactNode } from 'react';

export type BadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'default' | 'primary';
export type BadgeSize = 'sm' | 'md' | 'lg';

interface StatusBadgeProps {
  variant?: BadgeVariant;
  size?: BadgeSize;
  children: ReactNode;
  icon?: ReactNode;
  dot?: boolean;
}

const VARIANT_CLASSES: Record<BadgeVariant, string> = {
  success: 'bg-green-100 text-green-800',
  warning: 'bg-yellow-100 text-yellow-800',
  error: 'bg-red-100 text-red-800',
  info: 'bg-blue-100 text-blue-800',
  default: 'bg-gray-100 text-gray-800',
  primary: 'bg-diesel-100 text-diesel-800',
};

const DOT_CLASSES: Record<BadgeVariant, string> = {
  success: 'bg-green-500',
  warning: 'bg-yellow-500',
  error: 'bg-red-500',
  info: 'bg-blue-500',
  default: 'bg-gray-500',
  primary: 'bg-diesel-500',
};

const SIZE_CLASSES: Record<BadgeSize, string> = {
  sm: 'px-1.5 py-0.5 text-xs',
  md: 'px-2 py-0.5 text-xs',
  lg: 'px-2.5 py-1 text-sm',
};

export function StatusBadge({
  variant = 'default',
  size = 'md',
  children,
  icon,
  dot = false,
}: StatusBadgeProps) {
  return (
    <span
      className={`inline-flex items-center gap-1 rounded-full font-medium ${VARIANT_CLASSES[variant]} ${SIZE_CLASSES[size]}`}
    >
      {dot && <span className={`h-1.5 w-1.5 rounded-full ${DOT_CLASSES[variant]}`} />}
      {icon && <span className="flex-shrink-0">{icon}</span>}
      {children}
    </span>
  );
}

// Pre-configured badges for common statuses
export function SuccessBadge({ children, ...props }: Omit<StatusBadgeProps, 'variant'>) {
  return <StatusBadge variant="success" {...props}>{children}</StatusBadge>;
}

export function WarningBadge({ children, ...props }: Omit<StatusBadgeProps, 'variant'>) {
  return <StatusBadge variant="warning" {...props}>{children}</StatusBadge>;
}

export function ErrorBadge({ children, ...props }: Omit<StatusBadgeProps, 'variant'>) {
  return <StatusBadge variant="error" {...props}>{children}</StatusBadge>;
}

export function InfoBadge({ children, ...props }: Omit<StatusBadgeProps, 'variant'>) {
  return <StatusBadge variant="info" {...props}>{children}</StatusBadge>;
}
