import * as React from 'react';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { Reveal } from './Reveal';

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

export const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  description,
  backLink,
  backgroundSymbol
}) => {
  return (
    <section className="narrow-container relative">
      {backgroundSymbol && (
        <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10 opacity-50">
          {backgroundSymbol}
        </div>
      )}
      
      {backLink && (
        <Link
          href={backLink.href}
          className="inline-flex items-center gap-3 px-4 py-2 border border-slate-200 rounded-full text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 mb-12 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 font-bold text-[10px] uppercase tracking-[0.3em] group"
        >
          <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" /> {backLink.label}
        </Link>
      )}
      
      <div className="space-y-16">
        <Reveal>
          <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.95]">
            {title}
          </h1>
        </Reveal>

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