Minimap HUD

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

interface MinimapHUDProps {
  size?: number;
}

export function MinimapHUD({ size = 200 }: MinimapHUDProps) {
  const { colors } = useTheme();

  return (
    <frame BackgroundColor3={colors.bgSecondary} Size={new UDim2(0, size, 0, size)}>
      <uicorner CornerRadius={new UDim(1, 0)} />
      <uistroke Thickness={2} Color={colors.border} />
      <textlabel
        Text={"N"}
        TextColor3={colors.textPrimary}
        BackgroundTransparency={1}
        Size={new UDim2(1, 0, 0, 20)}
        TextXAlignment={"Center"}
        TextYAlignment={"Top"}
      />
      <imagelabel
        Image={"rbxassetid://minimap-center-dot"}
        Size={new UDim2(0, 10, 0, 10)}
        Position={new UDim2(0.5, 0, 0.5, 0)}
        AnchorPoint={new Vector2(0.5, 0.5)}
        BackgroundTransparency={1}
        ImageColor3={colors.accent}
      />
    </frame>
  );
}