"use client";

import React from "react";
import { t } from "@/content/locales";

interface HUDProps {
  credits: number;
  hp: number;
  maxHp: number;
  location: string;
  targetCredits: number;
}

export default function HUD({
  credits,
  hp,
  maxHp,
  location,
  targetCredits,
}: HUDProps) {
  const progress = Math.min((credits / targetCredits) * 100, 100);

  return (
    <header className="fixed top-0 left-0 w-full bg-black border-b-2 border-yellow-500/50 p-4 font-mono text-yellow-500 z-50 shadow-[0_0_15px_rgba(234,179,8,0.2)]">
      <div className="max-w-7xl mx-auto flex flex-wrap justify-between items-center gap-4">
        {/* LORE & LOCATION */}
        <div className="flex flex-col">
          <span className="text-xs uppercase opacity-70">
            {t.HUD.SECTOR_LABEL}
          </span>
          <span className="text-xl font-bold tracking-widest">
            {location.toUpperCase()}
          </span>
        </div>

        {/* SHIP STATUS (HEALTH) */}
        <div className="flex flex-col min-w-[200px]">
          <div className="flex justify-between text-xs uppercase mb-1">
            <span>{t.HUD.HULL_LABEL}</span>
            <span className={hp <= 3 ? "text-red-500 animate-pulse" : ""}>
              {hp} / {maxHp}
            </span>
          </div>
          <div className="w-full h-3 bg-gray-900 border border-yellow-500/30">
            <div
              className={`h-full transition-all duration-500 ${hp <= 3 ? "bg-red-600" : "bg-yellow-500"}`}
              style={{ width: `${(hp / maxHp) * 100}%` }}
            />
          </div>
        </div>

        {/* ECONOMY (CREDITS) */}
        <div className="flex flex-col items-end">
          <span className="text-xs uppercase opacity-70">
            {t.HUD.GOAL_LABEL}
          </span>
          <div className="flex items-baseline gap-2">
            <span className="text-2xl font-bold text-green-400">
              {credits.toLocaleString()}
            </span>
            <span className="text-xs opacity-50">
              / {targetCredits.toLocaleString()}
            </span>
          </div>
          {/* Progress Bar for the Goal */}
          <div className="w-32 h-1 bg-gray-800 mt-1">
            <div
              className="h-full bg-green-500 shadow-[0_0_5px_#22c55e]"
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>
      </div>
    </header>
  );
}