"use client";

import type { ComponentExample } from "./component-registry";
import styles from "./dev-test.module.scss";

export function ComponentView({ example }: { example: ComponentExample }) {
  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>{example.name}</h2>
      {example.description ? (
        <p className={styles.sectionNote}>{example.description}</p>
      ) : null}

      <div className={styles.variantList}>
        {example.variants.map((variant) => (
          <div key={variant.label} className={styles.variant}>
            <span className={styles.variantLabel}>{variant.label}</span>
            <div className={styles.variantStage}>{variant.node}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

export function ComponentEmpty() {
  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>컴포넌트가 아직 없습니다</h2>
      <p className={styles.sectionNote}>
        컴포넌트를 만들면 <code>@fox/dev-test/component-registry.tsx</code>의{" "}
        <code>COMPONENT_EXAMPLES</code> 배열에 항목을 하나 추가하세요. 사이드바와 본문은 그
        배열만 보고 그리므로 다른 파일은 고칠 필요가 없습니다.
      </p>
      <pre className={styles.code}>{`{
  id: "button",
  name: "Button",
  description: "기본 액션 버튼",
  variants: [
    { label: "primary", node: <Button variant="primary">확인</Button> },
    { label: "disabled", node: <Button disabled>확인</Button> },
  ],
}`}</pre>
    </section>
  );
}