"use client";
import React from "react";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { ResponsiveActions } from "@/components/ui/responsive-actions";
import { cn } from "@/lib/utils";

interface Action {
  label: string;
  icon?: React.ReactNode;
  onClick?: () => void;
  className?: string;
  variant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
  href?: string;
}

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  icon?: React.ReactNode;
  actions?: Action[];
  children?: React.ReactNode;
  className?: string;
}

export function PageHeader({ title, subtitle, icon, actions, children, className }: PageHeaderProps) {
  return (
    <header
      dir="rtl"
      className={cn(
        "flex h-16 shrink-0 items-center justify-between border-b bg-card/80 backdrop-blur-md px-3 md:px-5 sticky top-0 z-20 shadow-sm",
        className
      )}
    >
      {/* Right: trigger + icon box + title */}
      <div className="flex items-center gap-2.5 min-w-0">
        <SidebarTrigger />
        {icon && (
          <div className="hidden sm:flex items-center justify-center w-8 h-8 rounded-lg border bg-muted/60 text-foreground shrink-0">
            {icon}
          </div>
        )}
        <div className="min-w-0">
          <h1 className="font-bold text-sm md:text-base truncate leading-tight">{title}</h1>
          {subtitle && (
            <p className="text-[11px] text-muted-foreground hidden sm:block truncate leading-tight">{subtitle}</p>
          )}
        </div>
      </div>

      {/* Left: children + actions */}
      <div className="flex items-center gap-2 shrink-0">
        {children}
        {actions && actions.length > 0 && <ResponsiveActions actions={actions} />}
      </div>
    </header>
  );
}