"use client";

import type { ReactNode } from "react";
import { cx } from "../../utils";

export type FoxBadgeColor =
  | "neutral"
  | "primary"
  | "secondary"
  | "accent"
  | "danger"
  | "warning"
  | "success"
  | "information"
  | "disabled";
export type FoxBadgeType = "outline" | "solid" | "pastel";
export type FoxBadgeSize = "lg" | "md" | "sm";

export interface FoxBadgeProps {
  children: ReactNode;
  color?: FoxBadgeColor;
  /** `outline`은 테두리만, `solid`는 색을 채우고, `pastel`은 옅게 깐다. */
  type?: FoxBadgeType;
  size?: FoxBadgeSize;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. 모양이 달라야 하면 여기 말고 `color`·`type`을 쓴다. */
  className?: string;
}

/**
 * @fox 배지. 상태를 갖지 않는 표시용 조각이라 누를 수 없다.
 *
 * 색 9종 × 계열 3종 × 크기 3종이 모두 시안에 있다. `disabled`는 잠긴 상태가 아니라
 * 색 이름이다 — 배지는 누를 것이 없어 상태가 없고, 시안도 색 축에 두었다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxBadge({
  children,
  color = "neutral",
  type = "outline",
  size = "lg",
  hidden = false,
  className,
}: FoxBadgeProps) {
  if (hidden) {
    return null;
  }

  return (
    <span
      className={cx(
        "fox-badge",
        `fox-badge--${color}`,
        `fox-badge--${type}`,
        `fox-badge--${size}`,
        className
      )}
    >
      {children}
    </span>
  );
}