"use client";

import type { ReactNode } from "react";
import { cx } from "../../utils";
import { FoxBreadcrumb, type FoxBreadcrumbItem } from "../fox-breadcrumb";

export interface FoxPageHeaderProps {
  /** 화면 제목. 페이지에 하나뿐인 이름이라 `<h1>`으로 나간다. */
  title: ReactNode;
  /** 제목 위에 붙는 현재 위치. 넘기지 않으면 영역을 그리지 않는다. */
  breadcrumb?: FoxBreadcrumbItem[];
  /** 제목 아래 한 줄 — 이 화면이 무엇을 하는 곳인지. 넘기지 않으면 영역을 그리지 않는다. */
  description?: ReactNode;
  /**
   * 제목 오른쪽 자리. 시안에는 들어간 것이 없지만 배치가 자리를 비워 두고 있어
   * (제목이 남는 폭을 먹고 24px 간격이 있다) 화면이 버튼 같은 것을 얹을 수 있게 연다.
   */
  actions?: ReactNode;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

/**
 * @fox 화면 머리말. 현재 위치와 제목, 그 아래 설명 한 줄을 얹고 본문과의 간격까지 갖는다.
 *
 * 현재 위치는 `FoxBreadcrumb`를 그대로 쓴다 — 시안에서도 breadcrumb 인스턴스다.
 * 설명은 가맹몰 시안(FOX-PAY_2.0 2805:635)이 제목 아래 두는 한 줄이다 — 원 시안(page-tit-area)엔
 * 없지만 같은 세로 쌓임이라 제목 다음 자리로 연다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxPageHeader({
  title,
  breadcrumb,
  description,
  actions,
  hidden = false,
  className,
}: FoxPageHeaderProps) {
  if (hidden) {
    return null;
  }

  return (
    <div className={cx("fox-page-header", className)}>
      <div className="fox-page-header__main">
        {breadcrumb && breadcrumb.length > 0 && <FoxBreadcrumb items={breadcrumb} />}
        <h1 className="fox-page-header__title">{title}</h1>
        {description && <p className="fox-page-header__description">{description}</p>}
      </div>
      {actions && <div className="fox-page-header__actions">{actions}</div>}
    </div>
  );
}