'use client';

import {VStack, HStack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

/**
 * A caption above a value.
 *
 * The smallest repeated unit in the app — it appears four to six times inside
 * every store card, reward card and staff card. Left as inline markup it is
 * where label sizing quietly drifts between modules.
 */
export function StatPair({
  label,
  value,
  align = 'start',
}: {
  label: string;
  value: React.ReactNode;
  align?: 'start' | 'end';
}) {
  return (
    <VStack gap={0.5} hAlign={align}>
      <Text size="sm" color="secondary">
        {label}
      </Text>
      <Text size="base" weight="semibold">
        {value}
      </Text>
    </VStack>
  );
}

/** A row of StatPairs, evenly distributed — the footer of most entity cards. */
export function StatRow({children}: {children: React.ReactNode}) {
  return (
    <HStack gap={4} hAlign="between" wrap="wrap">
      {children}
    </HStack>
  );
}
