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

export function PageHeader({ title, description, actions, className, eyebrow }: { title: React.ReactNode; description?: React.ReactNode; actions?: React.ReactNode; className?: string; eyebrow?: React.ReactNode }) {
  return (
    <div className={cn("flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between mb-6", className)}>
      <div className="min-w-0">
        {eyebrow ? <div className="mb-1 text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">{eyebrow}</div> : null}
        <h1 className="text-xl font-semibold tracking-tight sm:text-[22px]">{title}</h1>
        {description ? <p className="mt-1 max-w-2xl text-[13.5px] text-fg-muted leading-relaxed">{description}</p> : null}
      </div>
      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
    </div>
  );
}

export function SectionTitle({ children, className, right }: { children: React.ReactNode; className?: string; right?: React.ReactNode }) {
  return (
    <div className={cn("mb-3 flex items-center justify-between gap-3", className)}>
      <h2 className="text-[13px] font-semibold uppercase tracking-wide text-fg-subtle">{children}</h2>
      {right}
    </div>
  );
}