import Image from "next/image";
import type { ReactNode } from "react";

interface HeaderProps {
  title?: string;
  leading?: ReactNode;
  /** 우측 슬롯 */
  children?: ReactNode;
  /** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값(색상·타이포·간격 등) 주입 금지. */
  className?: string;
}

/** 상단 헤더 셸 — 로고 + 타이틀 + 우측 슬롯. */
export function Header({ title, leading, children, className }: HeaderProps) {
  return (
    <header
      className={`flex items-center justify-between gap-4 border-b border-border bg-surface px-6 py-4 ${className ?? ""}`}
    >
      <div className="flex items-center gap-3">
        {leading}
        <Image
          src="/images/logo-foxpay.svg"
          alt="FoxPay"
          width={170}
          height={62}
          className="h-8 w-auto"
          priority
        />
        {title && <span className="text-title-md text-foreground">{title}</span>}
      </div>
      {children && <div className="flex items-center gap-3">{children}</div>}
    </header>
  );
}