import React from "react";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function PageHeader({ 
  title, 
  subtitle, 
  actions = null,
  backTo = null,
  backButtonLabel = "Back"
}) {
  return (
    <div className="mb-8">
      {/* Back Button */}
      {backTo && (
        <Link to={backTo} className="inline-block mb-4">
          <Button variant="ghost" className="hover:bg-slate-100">
            <ArrowLeft className="w-4 h-4 mr-2" />
            {backButtonLabel}
          </Button>
        </Link>
      )}

      {/* Main Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-[#1C323E] to-[#0A39DF] bg-clip-text text-transparent mb-2">
            {title}
          </h1>
          {subtitle && (
            <p className="text-lg text-slate-600">{subtitle}</p>
          )}
        </div>

        {/* Custom Actions (if provided) */}
        {actions && (
          <div className="flex items-center gap-2">
            {actions}
          </div>
        )}
      </div>
    </div>
  );
}