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

export interface PageHeaderProps {
  title: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
}

export function PageHeader({
  title,
  description,
  action,
  className,
}: PageHeaderProps) {
  return (
    // PRD §12: flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-6
    <div
      className={cn(
        "flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-6",
        className
      )}
    >
      <div>
        {/* PRD §12: text-2xl font-semibold tracking-tight text-[#0B1F33] */}
        <h1 className="text-2xl font-semibold tracking-tight text-[#0B1F33]">
          {title}
        </h1>
        {description && (
          /* PRD §12: text-sm text-[#536273] */
          <p className="text-sm text-[#536273] mt-1">{description}</p>
        )}
      </div>

      {action && <div className="flex items-center gap-3 shrink-0">{action}</div>}
    </div>
  );
}