"use client";

import type { ReactNode } from "react";
import { cx } from "../../utils";

export type FoxCardSize = "xlg" | "lg" | "md" | "sm";

export interface FoxCardProps {
  size?: FoxCardSize;
  /** 위쪽 그림. 시안은 16:9다. */
  image?: ReactNode;
  title?: ReactNode;
  /** 제목 아래 한두 줄 설명. */
  description?: ReactNode;
  /** 제목·설명 아래에 서는 내용. 폼 구역처럼 카드 한 장으로 묶는 것을 넣는다. */
  children?: ReactNode;
  /** 아래쪽 줄. 시안은 글자 버튼이다. */
  actions?: ReactNode;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

/**
 * @fox 카드. 그림·글·내용·동작이 위에서 아래로 쌓인다.
 *
 * 제목·설명은 머리말이고 `children`은 그 아래 몸통이다 — 둘 다 주면 함께 그린다
 * (가맹몰 등록처럼 폼 구역을 카드로 묶을 때). 어느 한쪽만 줘도 된다.
 *
 * 크기는 여백과 모서리만 바꾼다 — 폭은 놓이는 자리가 정한다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxCard({
  size = "md",
  image,
  title,
  description,
  children,
  actions,
  hidden = false,
  className,
}: FoxCardProps) {
  if (hidden) {
    return null;
  }

  const hasHeader = Boolean(title) || Boolean(description);

  return (
    <div className={cx("fox-card", `fox-card--${size}`, className)}>
      {image && <div className="fox-card__image">{image}</div>}
      <div className="fox-card__contents">
        {hasHeader && (
          <div className="fox-card__header">
            {title && <p className="fox-card__title">{title}</p>}
            {description && <p className="fox-card__description">{description}</p>}
          </div>
        )}
        {children && <div className="fox-card__body">{children}</div>}
      </div>
      {actions && <div className="fox-card__actions">{actions}</div>}
    </div>
  );
}