"use client";

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

export interface FoxCarouselAreaProps {
  /** 위치 표시와 조작 버튼을 넣는다 — 시안은 [표시][이전][다음][재생·정지 또는 더보기]다. */
  children: ReactNode;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

/**
 * @fox 캐러셀 조작 묶음. 위치 표시와 버튼을 한 줄에 같은 간격으로 세운다.
 *
 * 무엇이 들어갈지는 정하지 않는다 — 시안에서도 조합이 두 가지(점+이전·다음·정지 /
 * 숫자+이전·다음·더보기)라 담는 그릇만 갖는다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxCarouselArea({ children, hidden = false, className }: FoxCarouselAreaProps) {
  if (hidden) {
    return null;
  }

  return <div className={cx("fox-carousel-area", className)}>{children}</div>;
}