"use client";

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

export interface FoxButtonPanelProps {
  /** 시안의 상단 80px 여백. 페이지 하단이 아닌 곳에 놓을 땐 끈다. */
  offset?: boolean;
  /** 배치 조정용. */
  className?: string;
  /** 버튼 그룹들. 하나면 가운데, 여럿이면 양끝으로 벌어진다. */
  children?: ReactNode;
}

/**
 * @fox 페이지 하단 동작 영역. 배치만 책임지고 상태를 갖지 않는다.
 *
 * 자식 수를 세지 않는다 — 가운데 정렬은 CSS `:only-child`가 판단하므로 프래그먼트나
 * 조건부 렌더로 자식이 갈려도 실제 DOM 기준으로 맞는다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxButtonPanel({
  offset = true,
  className,
  children,
}: FoxButtonPanelProps) {
  return (
    <div
      className={cx("fox-button-panel", offset && "fox-button-panel--offset", className)}
    >
      {children}
    </div>
  );
}