import type { ReactNode } from "react";
import { FoxButton } from "../core/components/fox-button";

export interface ComponentExample {
  /** 해시 링크에 쓰이는 kebab-case 식별자. */
  id: string;
  name: string;
  description?: string;
  /** 눈으로 비교해야 하는 조합을 빠짐없이 넣는다 — 예제가 곧 회귀 확인 수단이다. */
  variants: { label: string; node: ReactNode }[];
}

// 자리 확인용 도형. `currentColor`로 그려야 계열별 색이 입혀진다.
function DemoIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      <path d="M6 3l5 5-5 5" />
    </svg>
  );
}

/** 컴포넌트를 만들 때마다 항목 하나를 추가한다 — 다른 파일은 고치지 않는다. */
export const COMPONENT_EXAMPLES: ComponentExample[] = [
  {
    id: "fox-button",
    name: "FoxButton",
    description:
      "Figma 시안(관리자페이지 node 390:439)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. hover·pressed는 마우스를 올리거나 눌러 확인하세요. error 계열은 시안 미정이라 비어 있습니다.",
    variants: [
      {
        label: "계열 (type) — hover·pressed 확인 가능",
        node: (
          <>
            <FoxButton size="md" label="default" />
            <FoxButton size="md" type="primary" label="primary" />
            <FoxButton size="md" type="secondary" label="secondary" />
            <FoxButton size="md" type="error" label="error (시안 미정)" />
          </>
        ),
      },
      {
        label: "크기 (size)",
        node: (
          <>
            <FoxButton size="lg" label="lg" />
            <FoxButton size="md" label="md" />
            <FoxButton size="sm" label="sm" />
            <FoxButton size="xsm" label="xsm" />
          </>
        ),
      },
      {
        label: "아이콘",
        node: (
          <>
            <FoxButton size="md" label="leading" leadingIcon={<DemoIcon />} />
            <FoxButton size="md" label="trailing" trailingIcon={<DemoIcon />} />
            <FoxButton size="md" label="both" leadingIcon={<DemoIcon />} trailingIcon={<DemoIcon />} />
          </>
        ),
      },
      {
        label: "상태 — disabled / loading (둘 다 클릭이 막힌다)",
        node: (
          <>
            <FoxButton size="md" label="normal" onAction={() => undefined} />
            <FoxButton size="md" label="disabled" disabled />
            <FoxButton size="md" label="loading" loading />
            <FoxButton size="md" label="loading + icon" loading leadingIcon={<DemoIcon />} />
          </>
        ),
      },
      {
        label: "fullWidth",
        node: <FoxButton size="md" label="fullWidth" fullWidth />,
      },
      {
        label: "htmlType — 폼 안에서의 역할",
        node: (
          <>
            <FoxButton size="md" label="button (기본)" />
            <FoxButton size="md" label="submit" htmlType="submit" />
            <FoxButton size="md" label="reset" htmlType="reset" />
          </>
        ),
      },
      {
        label: "hidden — 렌더되지 않는다(아래는 비어 있는 것이 정상)",
        node: <FoxButton size="md" label="hidden" hidden />,
      },
    ],
  },
];