// Shared page header chrome for every Voltro-Cloud-style app:
// landing, docs, dashboard, marketplace. The single source of truth
// for the sticky top bar that wraps brand + navigation across all
// four web apps — keeps height, glass treatment, max-width, and
// padding identical so they read as one product.
//
// Treatment:
//   • sticky top-0, z-40 (above the docs sidebar's top-16 sticky)
//   • Fixed `h-16` (64px). NOT scroll-shrinking — DocsLayout's
//     sidebar uses `sticky top-16` and a height-changing header
//     would leave a gap or overlap on scroll. The visual
//     "compactness on scroll" effect is delivered by the glass
//     fade-in instead.
//   • Glass + border fade in once `scrollY > 24`. At rest the
//     header is fully transparent → the hero / page background
//     bleeds through.
//
// The children prop is the row contents (brand on the left, nav /
// actions on the right). Consumers compose freely; the kit just
// owns the wrapper.

import { useEffect, useState, type ReactNode } from 'react'
import { cn } from '../cn'

interface PageHeaderProps {
  readonly children: ReactNode
  readonly className?: string
}

export const PageHeader = ({ children, className }: PageHeaderProps): ReactNode => {
  const [scrolled, setScrolled] = useState(false)
  useEffect(() => {
    // 24px threshold — smaller flickers on subpixel scroll;
    // bigger leaves a moment where content touches the bare header.
    const onScroll = (): void => setScrolled(window.scrollY > 24)
    onScroll()
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  return (
    <header className={cn('sticky top-0 z-40', className)}>
      {/* Glass + hairline border, fade-in on scroll. Separate <div>
       * so opacity transitions don't affect the foreground row. */}
      <div
        aria-hidden="true"
        className={cn(
          'absolute inset-0 -z-10 transition-opacity duration-300 ease-out',
          'bg-background/80 backdrop-blur-lg border-b border-border',
          scrolled ? 'opacity-100' : 'opacity-0',
        )}
      />
      <div className="mx-auto max-w-7xl px-6 h-16 flex items-center justify-between gap-4">
        {children}
      </div>
    </header>
  )
}