"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;
  /** 제목·설명 대신 넣을 것. 주면 `title`·`description`은 쓰이지 않는다. */
  children?: ReactNode;
  /** 아래쪽 줄. 시안은 글자 버튼이다. */
  actions?: ReactNode;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

/**
 * @fox 카드. 그림·글·동작이 위에서 아래로 쌓인다.
 *
 * 크기는 여백과 모서리만 바꾼다 — 폭은 놓이는 자리가 정한다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxCard({
  size = "md",
  image,
  title,
  description,
  children,
  actions,
  hidden = false,
  className,
}: FoxCardProps) {
  if (hidden) {
    return null;
  }

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