import type { ReactNode } from "react";

/**
 * 컴포넌트 예제 하나. 사이드바의 "컴포넌트" 분류에 항목으로 뜬다.
 */
export interface ComponentExample {
  /** 해시 링크와 React key에 쓰이는 식별자. kebab-case. */
  id: string;
  /** 사이드바에 표시할 이름. */
  name: string;
  /** 한 줄 설명 (선택). */
  description?: string;
  /**
   * 이 컴포넌트가 가질 수 있는 상태들. variant·size·disabled처럼 **눈으로 비교해야 하는
   * 조합을 빠짐없이** 넣는다 — 예제가 곧 회귀 확인 수단이다.
   */
  variants: { label: string; node: ReactNode }[];
}

/**
 * 컴포넌트를 만들 때마다 여기에 한 항목씩 추가한다. 사이드바·본문은 이 배열만 보고
 * 그리므로 다른 파일을 고칠 필요가 없다.
 *
 * ```tsx
 * import { Button } from "../core/components/button";
 *
 * export const COMPONENT_EXAMPLES: ComponentExample[] = [
 *   {
 *     id: "button",
 *     name: "Button",
 *     description: "기본 액션 버튼",
 *     variants: [
 *       { label: "primary", node: <Button variant="primary">확인</Button> },
 *       { label: "disabled", node: <Button disabled>확인</Button> },
 *     ],
 *   },
 * ];
 * ```
 */
export const COMPONENT_EXAMPLES: ComponentExample[] = [];