'use client';

import { fmt } from '@/lib/game/stores';
import { formatHour } from '@/lib/game/formatting';
import { TimeDisplay } from '@/components/game/TimeDisplay';

interface HeaderProps {
  day: number;
  hour: number;
  insight: number;
}

export function Header({ day, hour, insight }: HeaderProps) {
  return (
    <header className="sticky top-0 z-50 bg-[var(--bg-surface)]/95 backdrop-blur-sm border-b border-[var(--border-subtle)] px-4 py-2">
      <div className="flex items-center justify-between">
        {/* Game Title - always visible */}
        <h1 className="text-xl font-bold game-title tracking-wider">MANA LOOP</h1>
        
        {/* Desktop header content */}
        <div className="hidden md:flex items-center gap-4">
          <TimeDisplay 
            day={day}
            hour={hour}
            insight={insight}
          />
        </div>
        
        {/* Mobile header content - compact */}
        <div className="flex md:hidden items-center gap-2">
          <div className="text-center">
            <div className="text-sm font-bold game-mono text-[var(--mana-light)]">
              D{day} {formatHour(hour)}
            </div>
            <div className="text-xs text-[var(--text-secondary)]">
              {fmt(insight)} 💎
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

Header.displayName = "Header";