'use client';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';

export const CompactPageHeader = ({ title, description, backButtonHref }: { title: string, description: string, backButtonHref?: string }) => (
    <header className="py-12 md:py-16 bg-transparent relative overflow-hidden flex items-center justify-center">
      <div className="container mx-auto px-4 relative z-20">
        <div className="text-center">
            {backButtonHref && (
                <div className="absolute left-4 top-1/2 -translate-y-1/2">
                    <Button asChild variant="outline" size="icon">
                        <Link href={backButtonHref}><ArrowLeft /></Link>
                    </Button>
                </div>
            )}
            <h1 className="font-headline text-4xl md:text-5xl font-bold text-gradient">
            {title}
            </h1>
            <p className="mt-2 font-body text-base md:text-lg text-foreground/70 max-w-2xl mx-auto">
            {description}
            </p>
        </div>
      </div>
    </header>
);

export default CompactPageHeader;