"use client";

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

export interface FoxSpinnerProps {
  /**
   * 지름. CSS 길이면 무엇이든 되고, 굵기와 끝점도 함께 비율로 줄어든다.
   * 넘기지 않으면 시안 크기(80px)다. 이미 크기가 정해진 자리에 넣을 때는 `"100%"`를 준다.
   */
  size?: string | number;
  /**
   * 스크린리더가 읽을 말. 빈 문자열을 주면 잠재운다 — 옆 글자가 이미 "불러오는 중"이라고
   * 말하고 있을 때 쓴다.
   */
  label?: string;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

/**
 * @fox 로딩 표시. 한 바퀴 도는 고리와 그 앞머리의 동그라미로 이뤄진다.
 *
 * 색은 감싼 쪽의 `color`를 따른다 — 버튼 안에서는 글자색과 같아지고, 홀로 쓰면 테마
 * 기본색이다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxSpinner({ size, label = "불러오는 중", hidden = false, className }: FoxSpinnerProps) {
  if (hidden) {
    return null;
  }

  return (
    <span
      className={cx("fox-spinner", className)}
      style={size === undefined ? undefined : { inlineSize: size, blockSize: size }}
      role={label ? "status" : undefined}
      aria-label={label || undefined}
    >
      <span className="fox-spinner__arc" />
      <span className="fox-spinner__head" />
    </span>
  );
}