"use client";

import { Clock } from "lucide-react";
import { TimerBar } from "./TimerBar";
import { ScoreDisplay } from "./ScoreDisplay";
import { StreakCounter } from "./StreakCounter";

interface GameHeaderProps {
  timeRemaining: number;
  totalTime: number;
  questionNumber: number;
  totalQuestions: number;
  score: number;
  streak: number;
  showTimer?: boolean;
}

export function GameHeader({
  timeRemaining, totalTime, questionNumber, totalQuestions, score, streak, showTimer = true,
}: GameHeaderProps) {
  return (
    <div className="w-full max-w-2xl space-y-3">
      <div className="glass-card p-3 flex items-center justify-between gap-2 flex-wrap">
        {showTimer && (
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/10">
            <Clock size={14} className="text-gray-400" />
            <span className="text-sm font-bold tabular-nums text-gold">{timeRemaining}s</span>
          </div>
        )}
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/10">
          <span className="text-sm text-gray-400">Q</span>
          <span className="text-sm font-bold">{questionNumber}/{totalQuestions}</span>
        </div>
        <ScoreDisplay score={score} />
        <StreakCounter streak={streak} />
      </div>
      {showTimer && <TimerBar timeRemaining={timeRemaining} totalTime={totalTime} />}
    </div>
  );
}