"use client";

import Link from "next/link";

interface PageHeaderProps {
  title: string;
  breadcrumb?: string;
  description?: string;
}

export default function PageHeader({
  title,
  breadcrumb,
  description,
}: PageHeaderProps) {
  return (
    <section className="relative bg-[#FAA631] py-8 md:py-8 overflow-hidden border-b border-gray-100 mt-20">
      {/* Decorative Shapes */}
      {/* <div className="absolute top-0 left-0 w-40 h-40 md:w-60 md:h-60 bg-[url('/shapes/dots-green.svg')] bg-contain bg-no-repeat opacity-60"></div>

      <div className="absolute bottom-0 right-0 w-56 h-56 md:w-96 md:h-96 bg-[url('/shapes/circle-line.svg')] bg-contain bg-no-repeat opacity-40"></div>

      <div className="absolute top-10 right-10 w-16 h-16 bg-[url('/shapes/waves.svg')] bg-contain bg-no-repeat opacity-90"></div> */}

      {/* Center Content */}
      <div className="container mx-auto px-4 text-center relative z-10 mt-5">
        <h1 className="text-3xl md:text-5xl font-bold text-white">
          {title}
        </h1>

        {breadcrumb && (
          <p className="mt-2 text-gray-600 flex justify-center gap-2 text-sm md:text-base">
            <Link href="/" className="hover:text-[#FFFFFF] transition">
              Home
            </Link>
            <span className="text-gray-500">➡</span>
            <span className="text-[#FFFFFF] font-semibold">{breadcrumb}</span>
          </p>
        )}

        {description && (
          <p className="mt-4 text-base md:text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed">
            {description}
          </p>
        )}
      </div>
    </section>
  );
}