"use client";

import { Paper, Stack, Text } from "@mantine/core";

/**
 * One figure in the reward-allocation row.
 *
 * The hint line is not decoration — it states how the number was derived
 * ("500 pts × 40 logged in"), so a reader can check the arithmetic instead of
 * trusting the label.
 */
export function AllocationTile({
  label,
  value,
  hint,
  accent = false,
}: {
  label: string;
  value: number;
  hint?: string;
  accent?: boolean;
}) {
  return (
    <Paper
      withBorder
      radius="md"
      p="sm"
      bg={
        accent
          ? "light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6))"
          : undefined
      }
    >
      <Stack gap={2}>
        <Text size="xs" c="dimmed" fw={600} tt="uppercase" lh={1.4}>
          {label}
        </Text>
        <Text
          fw={700}
          size="xl"
          style={{
            fontVariantNumeric: "tabular-nums",
            letterSpacing: "-0.02em",
          }}
        >
          {value.toLocaleString()}
        </Text>
        {hint && (
          <Text size="xs" c="dimmed">
            {hint}
          </Text>
        )}
      </Stack>
    </Paper>
  );
}