interface PageHeroProps {
  title: string
  breadcrumbs?: { label: string; href: string }[]
}

export function PageHero({ title, breadcrumbs }: PageHeroProps) {
  return (
    <div className="bg-secondary text-secondary-foreground py-12">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-center mb-4">{title}</h1>
        {breadcrumbs && (
          <nav className="flex items-center justify-center gap-2 text-sm">
            {breadcrumbs.map((crumb, index) => (
              <div key={crumb.href} className="flex items-center gap-2">
                <a href={crumb.href} className="hover:underline opacity-90">
                  {crumb.label}
                </a>
                {index < breadcrumbs.length - 1 && <span className="opacity-70">»</span>}
              </div>
            ))}
            <span className="opacity-70">»</span>
            <span className="font-medium">{title}</span>
          </nav>
        )}
      </div>
    </div>
  )
}