import type { ReactNode } from "react";

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

type PageHeaderProps = {
  title: string;
  actions?: ReactNode;
  filters?: ReactNode;
  className?: string;
};

export function PageHeader({ title, actions, filters, className }: PageHeaderProps) {
  return (
    <div className={cn("space-y-4", className)}>
      <div className="flex flex-col gap-3 border-b border-border/70 pb-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-3">
          <span
            aria-hidden
            className="h-7 w-1.5 rounded-full bg-gradient-to-b from-primary to-primary/40"
          />
          <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-[26px]">
            {title}
          </h1>
        </div>
        {actions ? (
          <div className="flex flex-wrap items-center gap-2 sm:justify-end">
            {actions}
          </div>
        ) : null}
      </div>
      {filters ? (
        <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
          {filters}
        </div>
      ) : null}
    </div>
  );
}