import React from "react";
import { cn } from "./cn";

export default function PageHeader({
  title,
  subtitle,
  className,
  right, // هرچی خواستی: Button, Tabs, Filters ...
}) {
  return (
    <div
      className={cn(
        "mb-5 rounded-2xl shadow border border-black/10 dark:border-white/10 bg-[#A1E3F910] dark:bg-[#A1E3F910] p-4 sm:p-5",
        className
      )}
    >
      <div className="flex flex-col lg:flex-row gap-3 lg:items-center lg:justify-between min-w-0">
        <div className="min-w-0">
          <h1 className="text-lg sm:text-xl font-extrabold">{title}</h1>
          {subtitle ? (
            <p className="text-xs sm:text-sm text-black/60 dark:text-white/70 truncate">
              {subtitle}
            </p>
          ) : null}
        </div>

        {right ? (
          <div className="flex items-center gap-2 w-full lg:w-auto">{right}</div>
        ) : null}
      </div>
    </div>
  );
}
