import type { ReactNode } from "react";
import { cx } from "../../utils";
import { FoxFormLabel } from "../fox-form-label";

export interface FoxDescriptionItem {
  /** 목록 안에서 고유해야 한다. */
  key: string;
  /** 항목 이름. */
  term: ReactNode;
  /** 값. 글자든 토글이든 무엇이든 온다. */
  description: ReactNode;
  /** 참이면 이 줄만 렌더하지 않는다. */
  hidden?: boolean;
}

export interface FoxDescriptionListProps {
  items: FoxDescriptionItem[];
  hidden?: boolean;
  className?: string;
}

/**
 * @fox 조회 목록 — 이름과 값을 한 쌍씩 세로로 쌓는다. 조회 팝업·상세 화면이 쓰는 모양이다.
 *
 * 마크업 계약 (React 밖 소비자용):
 *   <dl class="fox-description-list">
 *     <div class="fox-description-list__item">
 *       <dt class="fox-description-list__term"><span class="fox-form-label">이름</span></dt>
 *       <dd class="fox-description-list__description">홍길동</dd>
 *     </div>
 *   </dl>
 *
 * `<dl>`로 그린다 — 이름·값 쌍이라는 관계가 보조기술에 그대로 전달된다. 이름 쪽은 `<dt>` 안에
 * `FoxFormLabel`을 `span`으로 넣어 서식을 디자인시스템과 맞춘다(`<dt>` 자체가 라벨 요소라
 * `<label>`을 쓰면 가리킬 대상이 없다).
 *
 * 짝을 `<div>`로 감싸는 것은 `<dl>`이 허용하는 유일한 묶음 방법이다 — 줄마다 여백과 구분선을
 * 주려면 감싸는 상자가 필요하다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxDescriptionList({
  items,
  hidden = false,
  className,
}: FoxDescriptionListProps) {
  if (hidden) {
    return null;
  }

  return (
    <dl className={cx("fox-description-list", className)}>
      {items
        .filter((item) => !item.hidden)
        .map((item) => (
          <div key={item.key} className="fox-description-list__item">
            <dt className="fox-description-list__term">
              <FoxFormLabel as="span">{item.term}</FoxFormLabel>
            </dt>
            <dd className="fox-description-list__description">
              {item.description}
            </dd>
          </div>
        ))}
    </dl>
  );
}