import * as React from "react";
import { Reveal } from "./Reveal";
import { H1, LeadText } from "./Typography";
import { cn } from "../utils/cn";

interface PageHeaderProps {
  title: React.ReactNode;
  description?: string;
  backgroundSymbol?: string;
  className?: string;
  variant?: "default" | "blog";
}

export const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  description,
  backgroundSymbol,
  className = "",
  variant = "default",
}) => {
  const isBlog = variant === "blog";

  return (
    <section
      className={cn(
        "narrow-container relative overflow-hidden md:overflow-visible",
        isBlog
          ? "pt-32 pb-12 md:pt-48 md:pb-16"
          : "pt-24 pb-16 md:pt-40 md:pb-24",
        className,
      )}
    >
      {backgroundSymbol && (
        <div
          className={cn(
            "absolute font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none",
            isBlog
              ? "-left-4 md:-left-8 top-12 text-[10rem] md:text-[16rem]"
              : "-left-12 md:-left-24 -top-8 md:-top-12 text-[15rem] md:text-[24rem]",
          )}
        >
          {backgroundSymbol}
        </div>
      )}

      {isBlog && (
        <div
          className="absolute left-0 top-32 w-px h-12 bg-slate-200"
          aria-hidden="true"
        />
      )}

      <div
        className={cn("space-y-4 md:space-y-8 relative", isBlog && "max-w-7xl")}
      >
        <Reveal>
          <h1
            className={cn(
              "font-bold text-slate-900 tracking-tighter leading-[1.1]",
              isBlog ? "text-xl md:text-6xl" : "text-2xl md:text-7xl",
            )}
          >
            {title}
          </h1>
        </Reveal>

        {description && (
          <Reveal delay={0.2}>
            <p
              className={cn(
                "font-serif italic text-slate-400 leading-relaxed",
                isBlog
                  ? "text-sm md:text-xl max-w-xl"
                  : "text-base md:text-2xl max-w-2xl",
              )}
            >
              {description}
            </p>
          </Reveal>
        )}

        {isBlog && (
          <div className="pt-4 flex items-center gap-4">
            <div className="h-px flex-1 bg-slate-100" />
            <span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
              Technical ID:{" "}
              {Math.random().toString(36).substring(7).toUpperCase()}
            </span>
          </div>
        )}
      </div>
    </section>
  );
};
