import type { ReactNode } from "react";
import { cn } from "@/lib/cn";

export function PageHeader({
  description,
  actions,
  className,
}: {
  description?: string;
  actions?: ReactNode;
  className?: string;
}) {
  if (!description && !actions) {
    return null;
  }

  return (
    <header
      className={cn(
        "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
        className,
      )}
    >
      {description ? (
        <p className="max-w-[52ch] text-[0.8125rem] leading-snug text-ink-60">{description}</p>
      ) : (
        <span className="hidden sm:block" />
      )}
      {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
    </header>
  );
}

export function SectionHeader({
  title,
  description,
  action,
  icon,
  id,
  className,
}: {
  title: string;
  description?: string;
  action?: ReactNode;
  icon?: ReactNode;
  id?: string;
  className?: string;
}) {
  return (
    <div className={cn("flex flex-wrap items-center justify-between gap-2", className)}>
      <div className="min-w-0">
        <h2
          id={id}
          className="flex items-center gap-2 text-[0.875rem] font-semibold tracking-[-0.01em] text-primary"
        >
          {icon ? (
            <span className="inline-flex shrink-0 text-ink-40" aria-hidden="true">
              {icon}
            </span>
          ) : null}
          {title}
        </h2>
        {description ? (
          <p className="mt-0.5 max-w-[48ch] text-[0.8125rem] leading-snug text-ink-60">{description}</p>
        ) : null}
      </div>
      {action ? <div className="shrink-0">{action}</div> : null}
    </div>
  );
}