/**
 * The small amount of chrome shared by every public PIG screen.
 *
 * These routes deliberately live outside the authenticated Shell, but they
 * should still feel like the same product. Keeping the wordmark, Learn link,
 * sign-in affordance and music control here prevents the auth and shared
 * Learn pages from drifting into separate mini-sites.
 */
import { AudioControl } from './AudioControl';
import { PiggyLogo } from './PiggyMark';
import { cn } from './ui';

type PublicDestination = 'learn' | 'sign-in';

export function PublicHeader({
  current,
  onSignIn,
}: {
  current?: PublicDestination;
  onSignIn?: () => void;
}) {
  const itemClass = (destination: PublicDestination) =>
    cn(
      'tap relative inline-flex items-center px-2 text-sm font-medium transition-colors',
      current === destination ? 'text-fg' : 'text-muted hover:text-fg',
      current === destination &&
        'after:absolute after:inset-x-2 after:bottom-1 after:h-px after:bg-current',
    );

  return (
    <header className="public-header relative z-30 border-b border-border/70 bg-bg/80 backdrop-blur-xl">
      <div className="mx-auto flex h-16 w-full min-w-0 max-w-7xl items-center gap-2 px-4 sm:px-6 lg:px-8">
        <a href="/" className="tap flex shrink-0 items-center rounded-lg" aria-label="PIG home">
          <PiggyLogo />
        </a>

        <nav aria-label="Public navigation" className="ml-auto flex shrink-0 items-center gap-1">
          <a
            href="/learn"
            aria-current={current === 'learn' ? 'page' : undefined}
            className={itemClass('learn')}
          >
            Learn
          </a>
          <AudioControl className="public-header-audio" />
          {onSignIn ? (
            <button type="button" onClick={onSignIn} className={itemClass('sign-in')}>
              Sign in
            </button>
          ) : current === 'sign-in' ? (
            <span aria-current="page" className={itemClass('sign-in')}>
              Sign in
            </span>
          ) : (
            <a href="/" className={itemClass('sign-in')}>
              Sign in
            </a>
          )}
        </nav>
      </div>
    </header>
  );
}