Scoreboard HUD

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

interface Player {
  name: string;
  score: number;
  ping: number;
  team: string;
}

interface ScoreboardHUDProps {
  players: Player[];
}

export function ScoreboardHUD({ players }: ScoreboardHUDProps) {
  const { colors, spacing } = useTheme();
  const [sortBy, setSortBy] = useState<keyof Player>("score");

  const sorted = [...players].sort((a, b) => (b[sortBy] as number) - (a[sortBy] as number));

  return (
    <frame BackgroundColor3={colors.bgSecondary} Size={new UDim2(0, 320, 0, 0)} AutomaticSize={"Y"}>
      <uicorner CornerRadius={new UDim(0, 8)} />
      <uilistlayout Padding={new UDim(0, 2)} />
      {sorted.map((p, i) => (
        <frame key={i} BackgroundColor3={i % 2 === 0 ? colors.bg : colors.bgTertiary} Size={new UDim2(1, 0, 0, 32)}>
          <textlabel Text={p.name} TextColor3={colors.textPrimary} BackgroundTransparency={1} Size={new UDim2(0.4, 0, 1, 0)} />
          <textlabel Text={tostring(p.score)} TextColor3={colors.textSecondary} BackgroundTransparency={1} Position={new UDim2(0.4, 0, 0, 0)} Size={new UDim2(0.3, 0, 1, 0)} />
          <textlabel Text={`${p.ping}ms`} TextColor3={colors.textMuted} BackgroundTransparency={1} Position={new UDim2(0.7, 0, 0, 0)} Size={new UDim2(0.3, 0, 1, 0)} />
        </frame>
      ))}
    </frame>
  );
}