Player Health HUD

import React from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface HealthHUDProps {
  currentHP: number;
  maxHP: number;
}

export function HealthHUD({ currentHP, maxHP }: HealthHUDProps) {
  const { colors } = useTheme();
  const percentage = math.clamp(currentHP / maxHP, 0, 1);
  const isLow = percentage < 0.25;

  return (
    <frame BackgroundTransparency={0.3} BackgroundColor3={colors.bg} Size={new UDim2(0, 220, 0, 36)}>
      <uicorner CornerRadius={new UDim(0, 6)} />
      <frame BackgroundColor3={isLow ? colors.error : colors.success} Size={new UDim2(percentage, 0, 1, 0)}>
        <uicorner CornerRadius={new UDim(0, 6)} />
      </frame>
      <textlabel
        Text={`${currentHP} / ${maxHP}`}
        TextColor3={colors.textPrimary}
        BackgroundTransparency={1}
        Size={new UDim2(1, 0, 1, 0)}
        TextXAlignment={"Center"}
      />
    </frame>
  );
}