import React from 'react';
import './Badge.css';

/* 徽标（移动端）— 规格 §9；角标绝对定位不改变被包裹元素的布局尺寸。
   shape=dot 时对读屏隐藏；数字/文字角标带 aria-label，否则读屏只读出数字。 */
export default function Badge({
  shape = 'number',
  count = 0,
  max = 99,
  text = '',
  standalone = false,
  showZero = false,
  children = null,
}) {
  const overflow = shape === 'number' && count > max;
  const hidden = shape === 'number' && !showZero && count === 0;
  const display = shape === 'text' ? text : overflow ? `${max}+` : String(count);
  const ariaLabel = shape === 'dot' ? undefined : shape === 'text' ? text : `${count} 条未读`;

  const cls =
    'kole-m-badge' +
    (shape === 'dot' ? ' kole-m-badge--dot' : '') +
    (shape === 'text' ? ' kole-m-badge--text' : '') +
    (standalone ? ' kole-m-badge--standalone' : '') +
    (hidden ? ' is-hidden' : '');

  return (
    <span className={cls}>
      {standalone ? null : <span className="kole-m-badge__wrap">{children}</span>}
      <span
        className="kole-m-badge__count"
        aria-label={shape === 'dot' ? undefined : ariaLabel}
        aria-hidden={shape === 'dot' ? 'true' : undefined}
      >
        {shape === 'dot' ? null : display}
      </span>
    </span>
  );
}