Item Tooltip

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

interface ItemStats {
  damage?: number;
  defense?: number;
  speed?: number;
}

interface ItemTooltipProps {
  name: string;
  description: string;
  rarity: string;
  stats?: ItemStats;
  value?: number;
  position: Vector2;
}

export function ItemTooltip({ name, description, rarity, stats, value, position }: ItemTooltipProps) {
  const { colors, spacing } = useTheme();

  return (
    <frame
      BackgroundColor3={colors.bgSecondary}
      Position={new UDim2(0, position.X + 16, 0, position.Y + 16)}
      Size={new UDim2(0, 200, 0, 0)}
      AutomaticSize={"Y"}
      ZIndex={10}
    >
      <uicorner CornerRadius={new UDim(0, 8)} />
      <uilistlayout Padding={new UDim(0, spacing["3xs"])} />
      <uipadding PaddingLeft={new UDim(0, spacing.xs)} PaddingRight={new UDim(0, spacing.xs)} PaddingTop={new UDim(0, spacing.xs)} PaddingBottom={new UDim(0, spacing.xs)} />
      <textlabel Text={name} TextColor3={colors.textPrimary} BackgroundTransparency={1} Size={new UDim2(1, 0, 0, 18)} />
      <textlabel Text={rarity.upper()} TextColor3={colors.accent} BackgroundTransparency={1} Size={new UDim2(1, 0, 0, 14)} />
      <textlabel Text={description} TextColor3={colors.textSecondary} BackgroundTransparency={1} Size={new UDim2(1, 0, 0, 0)} AutomaticSize={"Y"} TextWrapped={true} />
      {stats && (
        <frame BackgroundTransparency={1} Size={new UDim2(1, 0, 0, 0)} AutomaticSize={"Y"}>
          {stats.damage && <textlabel Text={`Damage: +${stats.damage}`} TextColor3={colors.success} BackgroundTransparency={1} Size={new UDim2(1, 0, 0, 14)} />}
          {stats.defense && <textlabel Text={`Defense: +${stats.defense}`} TextColor3={colors.primary} BackgroundTransparency={1} Size={new UDim2(1, 0, 0, 14)} />}
        </frame>
      )}
    </frame>
  );
}