"use client";

import { useRouter } from "next/navigation";
import { ArrowLeft } from "lucide-react";

interface MiniGameHeaderProps {
  title: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
  accentColor: string;
  stats: { label: string; value: string }[];
}

/**
 * Header bar for individual mini-game screens.
 * Shows a back button, game title with icon, and a stat bar.
 */
const ACCENT_TEXT: Record<string, string> = {
  cyan: "text-cyan",
  gold: "text-gold",
  magenta: "text-magenta",
};

export function MiniGameHeader({
  title,
  icon: Icon,
  accentColor,
  stats,
}: MiniGameHeaderProps) {
  const router = useRouter();

  const colorClass = ACCENT_TEXT[accentColor] ?? "text-white";

  return (
    <div className="w-full max-w-2xl space-y-3">
      <div className="flex items-center gap-3">
        <button
          onClick={() => router.push("/games")}
          className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
          aria-label="Back to Arcade"
        >
          <ArrowLeft size={18} className="text-gray-400" />
        </button>
        <Icon size={24} className={colorClass} />
        <h1 className="text-xl font-bold">{title}</h1>
      </div>

      {stats.length > 0 && (
        <div className="glass-card p-3 flex items-center justify-around gap-2 flex-wrap">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center px-3 py-1">
              <p className="text-[10px] text-gray-400 uppercase tracking-wider">
                {stat.label}
              </p>
              <p className="text-sm font-bold tabular-nums">{stat.value}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}