"use client";

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

export type FoxRadioIconSize = "lg" | "md";

export interface FoxRadioIconProps {
  size?: FoxRadioIconSize;
  /**
   * 선택 상태를 클래스로 못박는다. `FoxRadio` 안에서는 넘기지 않는다 — 네이티브
   * `<input type="radio">`의 `:checked`가 스타일 훅을 겸하므로 비제어에서도 맞는다.
   * 상태를 나란히 보여주는 예제처럼 단독으로 쓸 때만 쓴다.
   */
  checked?: boolean;
  /** 비활성 상태를 클래스로 못박는다. `checked`와 같은 이유로 단독 사용 전용이다. */
  disabled?: boolean;
  /** 배치 조정용. */
  className?: string;
  ref?: Ref<HTMLSpanElement>;
}

const SIZE_CLASS: Record<FoxRadioIconSize, string> = {
  lg: "fox-radio-icon--lg",
  md: "fox-radio-icon--md",
};

/**
 * @fox 라디오의 동그란 표시. 상태를 갖지 않는다.
 *
 * 자체로는 입력이 아니다 — 실제 선택은 `FoxRadio`가 감싸는 네이티브
 * `<input type="radio">`가 담당하고, 이 요소는 그 상태를 CSS로 비춘다. 그래서 `FoxRadio`
 * 안에서는 `checked`·`disabled`를 넘길 필요가 없다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxRadioIcon({
  size = "lg",
  checked = false,
  disabled = false,
  className,
  ref,
}: FoxRadioIconProps) {
  return (
    <span
      ref={ref}
      aria-hidden="true"
      className={cx(
        "fox-radio-icon",
        SIZE_CLASS[size],
        checked && "fox-radio-icon--checked",
        disabled && "fox-radio-icon--disabled",
        className
      )}
    >
      {/* 선택됐을 때만 넣지 않는다 — 보이기/숨기기는 CSS가 정해야 비제어에서도 맞는다. */}
      <span className="fox-radio-icon__dot" />
    </span>
  );
}