Shop Listing Card

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

interface ShopListingProps {
  image: string;
  name: string;
  price: number;
  originalPrice?: number;
  currency?: string;
  onBuy: () => void;
}

export function ShopListing({ image, name, price, originalPrice, currency = "R$", onBuy }: ShopListingProps) {
  const { colors, spacing } = useTheme();

  return (
    <frame BackgroundColor3={colors.bgSecondary} Size={new UDim2(0, 160, 0, 220)}>
      <uicorner CornerRadius={new UDim(0, 12)} />
      <uilistlayout Padding={new UDim(0, spacing["3xs"])} />
      <imagelabel Image={image} Size={new UDim2(1, 0, 0, 130)} BackgroundColor3={colors.bgTertiary}>
        <uicorner CornerRadius={new UDim(0, 8, 0, 8, 0, 0, 0)} />
      </imagelabel>
      <textlabel Text={name} TextColor3={colors.textPrimary} BackgroundTransparency={1} Size={new UDim2(1, -spacing.xs, 0, 18)} Position={new UDim2(0, spacing.xs, 0, 0)} />
      <frame BackgroundTransparency={1} Size={new UDim2(1, -spacing.xs, 0, 20)} Position={new UDim2(0, spacing.xs, 0, 0)}>
        <uilistlayout FillDirection={"Horizontal"} Padding={new UDim(0, 4)} />
        <textlabel Text={`${currency}${price}`} TextColor3={colors.accent} BackgroundTransparency={1} Size={new UDim2(0, 50, 1, 0)} />
        {originalPrice && (
          <textlabel Text={`${currency}${originalPrice}`} TextColor3={colors.textMuted} BackgroundTransparency={1} Size={new UDim2(0, 50, 1, 0)} TextDecoration={"LineThrough"} />
        )}
      </frame>
      <textbutton Text={"Buy"} BackgroundColor3={colors.primary} TextColor3={colors.textPrimary} Size={new UDim2(1, -spacing.sm, 0, 28)} Position={new UDim2(0, spacing.xs, 0, 0)} Event={{ Activated: onBuy }}>
        <uicorner CornerRadius={new UDim(0, 6)} />
      </textbutton>
    </frame>
  );
}