import { Badge } from '../Badge/Badge';
import { FONT_FAMILY_MONO } from '../../../designTokens';

/**
 * Badge contador cyan/azul (mismo aspecto que «2 tareas completadas» en ConfiguracionOverview).
 * Usa `Badge` success como base con overrides de color.
 */
export const BADGE_AZUL_STYLE = {
  height: '24px',
  minWidth: '96px',
  opacity: 1,
  borderRadius: 'var(--radius-16, 16px)',
  paddingTop: '2px',
  paddingRight: '12px',
  paddingBottom: '4px',
  paddingLeft: '12px',
  backgroundColor: 'var(--color-cyan-82, #B8E2E9)',
  fontFamily: FONT_FAMILY_MONO,
  fontWeight: 400,
  fontStyle: 'normal',
  fontSize: '12px',
  lineHeight: '18px',
  letterSpacing: '0%',
  textAlign: 'center',
  verticalAlign: 'middle',
  color: 'var(--color-grey-700, #474747)',
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  boxSizing: 'border-box',
  flexShrink: 0,
};

/**
 * @param {React.ReactNode} [children] — Texto del badge (prioridad).
 * @param {string} [label] — Texto si no hay `children` ni `count`.
 * @param {number|string} [count] — Prefijo numérico (ej. 4 → «4 documentos» con `suffix`).
 * @param {string} [suffix] — Default: «documentos».
 */
export const BadgeAzul = ({
  children,
  label,
  count,
  suffix = 'documentos',
  className = '',
  style,
  ...props
}) => {
  let content = children;
  if (content == null) {
    if (count !== undefined && count !== null && String(count).trim() !== '') {
      content = `${count} ${suffix}`.trim();
    } else {
      content = label;
    }
  }

  if (content == null || content === '') return null;

  return (
    <Badge
      variant="success"
      size="small"
      className={['anima-badge-azul', className].filter(Boolean).join(' ')}
      style={{
        ...BADGE_AZUL_STYLE,
        ...(style || {}),
      }}
      {...props}
    >
      {content}
    </Badge>
  );
};

export default BadgeAzul;
