"use client";

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

// =============================================================================
// SectionHeaderDark — Page title + subtitle for dark theme
// =============================================================================

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

export function SectionHeaderDark({ title, subtitle, actions, className }: SectionHeaderDarkProps) {
  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-[#FFFFFF] leading-tight">
          {title}
        </h1>
        {subtitle && (
          <p className="mt-1 text-[14px] leading-relaxed text-[#A1A1AA] max-w-[560px]">
            {subtitle}
          </p>
        )}
      </div>
      {actions && <div className="flex shrink-0 items-center gap-2 mt-2 sm:mt-0">{actions}</div>}
    </div>
  );
}