"use client";

import { cx } from "../../utils";

export type FoxBadgeDotColor = "primary" | "new";

export interface FoxBadgeDotProps {
  color?: FoxBadgeDotColor;
  /**
   * 개수. 주면 숫자 배지가 되고, 없으면 점 하나로 나온다 — 시안의 badge-number와
   * badge-dot이다.
   */
  count?: number;
  /** 넘으면 `99+`처럼 적는다. `count`가 없으면 쓰이지 않는다. */
  max?: number;
  /**
   * 스크린리더가 읽을 말. 점만 있을 때는 눈에 보이는 글자가 없어 이걸로 알린다.
   * 옆 요소가 이미 알리고 있으면 빈 문자열을 줘서 잠재운다.
   */
  label?: string;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

/**
 * @fox 알림 배지. 개수를 주면 숫자로, 안 주면 점으로 나온다.
 *
 * 시안의 badge-number와 badge-dot을 하나로 둔다 — 둘 다 알림 표시이고 색 축(primary·new)이
 * 같으며, 개수를 아느냐 모르느냐만 다르다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxBadgeDot({
  color = "primary",
  count,
  max,
  label,
  hidden = false,
  className,
}: FoxBadgeDotProps) {
  if (hidden) {
    return null;
  }

  const counted = count !== undefined;
  const text = counted && max !== undefined && count > max ? `${max}+` : `${count}`;
  const spoken = label ?? (counted ? `새 알림 ${text}건` : "새 알림");

  return (
    <span
      className={cx(
        "fox-badge-dot",
        `fox-badge-dot--${color}`,
        counted && "fox-badge-dot--counted",
        className
      )}
      role={spoken ? "status" : undefined}
      aria-label={spoken || undefined}
    >
      {/* 보이는 숫자는 읽히지 않게 한다 — 위 `aria-label`이 이미 같은 말을 한다. */}
      {counted && <span aria-hidden="true">{text}</span>}
    </span>
  );
}