import { motion } from "framer-motion";

interface PageBannerProps {
  title: string;
  subtitle?: string;
  image: string;
}

const PageBanner = ({ title, subtitle, image }: PageBannerProps) => (
  <div className="page-banner">
    <img src={image} alt={title} className="absolute inset-0 w-full h-full object-cover" />
    <div className="page-banner-overlay" />
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8 }}
      className="page-banner-content"
    >
      <h1 className="font-heading text-3xl md:text-5xl font-bold text-primary-foreground mb-3">{title}</h1>
      <div className="gold-divider mb-4" />
      {subtitle && <p className="text-primary-foreground/80 text-lg max-w-2xl mx-auto px-4">{subtitle}</p>}
    </motion.div>
  </div>
);

export default PageBanner;
