import * as React from 'react';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { Reveal } from './Reveal';
import { H1, LeadText } from './Typography';
import { cn } from '../utils/cn';

interface PageHeaderProps {
  title: React.ReactNode;
  description?: string;
  backLink?: {
    href: string;
    label: string;
  };
  backgroundSymbol?: string;
  className?: string;
}

export const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  description,
  backLink,
  backgroundSymbol,
  className = ""
}) => {
  return (
    <section className={cn("narrow-container relative pt-24 pb-16 md:pt-40 md:pb-24", className)}>
      {backgroundSymbol && (
        <div className="absolute -left-24 -top-12 text-[20rem] md:text-[24rem] font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none">
          {backgroundSymbol}
        </div>
      )}
      
      {backLink && (
        <Link
          href={backLink.href}
          className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
        >
          <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" /> {backLink.label}
        </Link>
      )}
      
      <div className="space-y-8 relative">
        <Reveal>
          <H1 className="max-w-4xl">
            {title}
          </H1>
        </Reveal>

        {description && (
          <Reveal delay={0.2}>
            <LeadText className="text-xl md:text-2xl text-slate-400 leading-relaxed max-w-2xl font-serif italic">
              {description}
            </LeadText>
          </Reveal>
        )}
      </div>
    </section>
  );
};
