src/components/clean/shared/CleanPageHeader.tsx

"use client";

import { cn } from "@/lib/utils";

// =============================================================================
// CleanPageHeader — Page title + subtitle
// =============================================================================

export interface CleanPageHeaderProps {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  className?: string;
}

export function CleanPageHeader({ title, subtitle, actions, className }: CleanPageHeaderProps) {
  return (
    <div className={cn("flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4", className)}>
      <div className="min-w-0">
        <h1 className="text-[28px] font-bold tracking-tight text-[#111] leading-tight">
          {title}
        </h1>
        {subtitle && (
          <p className="mt-1 text-[14px] leading-relaxed text-[#6B7280] max-w-[560px]">
            {subtitle}
          </p>
        )}
      </div>
      {actions && <div className="flex shrink-0 items-center gap-2 mt-2 sm:mt-0">{actions}</div>}
    </div>
  );
}