"use client";

import { ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";
import { useSidebarContext } from "@/components/layout/sidebar-context";
import { useIsMobile } from "@/hooks/use-mobile";

interface PageHeaderProps {
  title: string;
  description?: string | ReactNode;
  actions?: ReactNode;
  rightContent?: ReactNode;
}

export function PageHeader({
  title,
  description,
  actions,
  rightContent,
}: PageHeaderProps) {
  const { setOpen } = useSidebarContext();
  const isMobile = useIsMobile();

  return (
    <div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-2">
      <div className="flex items-center gap-4 flex-1 min-w-0">
        {isMobile && (
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setOpen(true)}
            className="shrink-0 rounded-xl hover:bg-muted/60"
          >
            <Menu className="w-5 h-5" />
          </Button>
        )}
        <div className="flex-1 min-w-0 pr-20 md:pr-0">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight mb-2 leading-tight">
            {title}
          </h1>
          {description && (
            <div className="text-base md:text-lg text-muted-foreground/70 font-semibold">
              {description}
            </div>
          )}
        </div>
      </div>
      {(rightContent || actions) && (
        <>
          {isMobile ? (
            <div className="absolute top-0 right-0 flex items-center gap-2">
              {rightContent}
              {actions && (
                <div className="[&>button]:h-10 [&>button]:px-3 [&>button]:text-sm">
                  {actions}
                </div>
              )}
            </div>
          ) : (
            <div className="flex items-center gap-3 flex-wrap">
              {rightContent}
              {actions && (
                <div className="flex gap-3">
                  {actions}
                </div>
              )}
            </div>
          )}
        </>
      )}
    </div>
  );
}
