"use client";
import { useRouter } from "next/navigation";
import { ArrowLeft, X } from "lucide-react";

type PageHeaderProps = {
  icon: React.ReactNode;
  iconColorClass?: string;
  iconBgClass?: string;
  title: string;
  subtitle?: string;
  onClose?: () => void;
};

export default function PageHeader({
  icon,
  iconColorClass = "text-[#d4537e]",
  iconBgClass = "bg-[#fceef3]",
  title,
  subtitle,
  onClose,
}: PageHeaderProps) {
  const router = useRouter();

  return (
    <header className="flex items-center justify-between px-7 h-18 bg-white border-b border-[#e5e7eb] sticky top-0 z-20">
  <div className="flex items-center gap-4 min-w-0">
    <span
      className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${iconBgClass} ${iconColorClass}`}
    >
      {icon}
    </span>

    <div className="min-w-0">
      <p className="text-lg font-semibold text-[#111111] truncate">
        {title}
      </p>

      {subtitle && (
        <p className="text-sm text-[#9ca3af] truncate">
          {subtitle}
        </p>
      )}
    </div>
  </div>

  {onClose && (
    <button
      onClick={onClose}
      className="w-9 h-9 rounded-full bg-[#f3f4f6] hover:bg-[#e5e7eb] flex items-center justify-center transition-colors"
    >
      <X size={18} className="text-[#4b5563]" />
    </button>
  )}
</header>
  );
}