import { type ReactNode } from "react";

type Props = {
  title: ReactNode;
  description?: ReactNode;
  actions?: ReactNode;
  icon?: ReactNode;
};

export function PageHeader({ title, description, actions, icon }: Props) {
  return (
    <header className="mb-6 flex flex-row items-start justify-between gap-4 border-b border-zinc-800/60 pb-6 sm:items-end">
      <div className="flex min-w-0 flex-1 items-start gap-4">
        {icon ? <div className="mt-1 shrink-0 text-accent-400">{icon}</div> : null}
        <div className="min-w-0 space-y-1">
          <h1 className="font-display text-3xl font-extrabold tracking-tight text-zinc-50 sm:text-4xl">{title}</h1>
          {description ? <p className="max-w-2xl text-sm text-zinc-400 sm:text-base">{description}</p> : null}
        </div>
      </div>
      {actions ? <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div> : null}
    </header>
  );
}