import Link from "next/link";
import Container from "./Container";

export default function PageBanner({
  title,
  subtitle,
  breadcrumb,
}: {
  title: string;
  subtitle?: string;
  breadcrumb: string;
}) {
  return (
    <section className="relative overflow-hidden bg-surface py-14 sm:py-16">
      <div
        aria-hidden
        className="absolute inset-0 text-primary/[0.07]"
        style={{
          backgroundImage: "radial-gradient(currentColor 1.5px, transparent 1.5px)",
          backgroundSize: "22px 22px",
        }}
      />
      <div
        aria-hidden
        className="absolute -top-24 -end-24 h-64 w-64 rounded-full bg-primary/10 blur-3xl"
      />
      <div
        aria-hidden
        className="absolute -bottom-28 -start-16 h-56 w-56 rounded-full bg-accent/15 blur-3xl"
      />

      <Container className="relative">
        <h1 className="text-3xl sm:text-4xl font-extrabold text-primary">{title}</h1>
        {subtitle && (
          <p className="mt-3 max-w-2xl text-foreground">{subtitle}</p>
        )}
        <div className="mt-4 flex items-center gap-2 text-sm text-foreground">
          <Link href="/" className="hover:text-primary transition-colors">
            خانه
          </Link>
          <span className="text-foreground/50">/</span>
          <span className="font-medium text-primary">{breadcrumb}</span>
        </div>
      </Container>
    </section>
  );
}
