import React from 'react';

interface PageHeaderProps {
    title: string;
    description?: string;
    image?: string;
    children?: React.ReactNode;
}

const PageHeader: React.FC<PageHeaderProps> = ({ 
    title, 
    description,
    image = "/media/images/headers/header-about.png",
    children,
}) => {
  return (
    <div className="relative w-full h-[400px] md:h-[500px] bg-brand-dark text-white flex flex-col justify-center items-center text-center overflow-hidden">
      <div className="absolute inset-0 z-0">
        <img 
          src={image} 
          alt={title} 
          className="w-full h-full object-cover opacity-30"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-brand-dark/80 to-brand-dark/40" />
      </div>

      <div className="relative z-10 container mx-auto px-6 mt-16 flex flex-col items-center">
        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">{title}</h1>
        {description && (
            <p className="text-gray-300 text-lg max-w-2xl mx-auto leading-relaxed mb-6">
                {description}
            </p>
        )}
        {children}
      </div>
    </div>
  );
};

export default PageHeader;