import React from "react";
import { Link } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import { Button } from "./ui/button";

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  backTo?: string | null;
  backButtonLabel?: string;
}

export default function PageHeader({
  title,
  subtitle,
  actions = null,
  backTo = null,
  backButtonLabel = "Back"
}: PageHeaderProps) {
  return (
    <div className="mb-8">
      {/* Back Button */}
      {backTo && (
        <Link to={backTo} className="inline-block mb-4">
          <Button variant="ghost" className="hover:bg-muted">
            <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 text-foreground mb-2">
            {title}
          </h1>
          {subtitle && (
            <p className="text-lg text-muted-foreground">{subtitle}</p>
          )}
        </div>

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