import { StyleSheet, Text } from "react-native";

import { Card } from "@/components/ui/Card";
import { useAppTheme } from "@/contexts/ThemeContext";
import { fonts, spacing } from "@/constants/theme";

type StatCardProps = {
  label: string;
  value: string;
  hint?: string;
};

/** Web `StatsCard` — glass card, border-0, shadow-md, p-6 */
export function StatCard({ label, value, hint }: StatCardProps) {
  const { colors } = useAppTheme();

  return (
    <Card variant="stat" style={styles.card}>
      <Text style={[styles.label, { color: colors.mutedForeground }]}>{label}</Text>
      <Text style={[styles.value, { color: colors.foreground }]}>{value}</Text>
      {hint ? (
        <Text style={[styles.hint, { color: colors.mutedForeground }]}>{hint}</Text>
      ) : null}
    </Card>
  );
}

const styles = StyleSheet.create({
  card: {
    width: "100%",
  },
  label: {
    fontSize: 13,
    fontFamily: fonts.bodyMedium,
  },
  value: {
    fontSize: 22,
    fontFamily: fonts.heading,
  },
  hint: {
    fontSize: 12,
    fontFamily: fonts.body,
    marginTop: 2,
  },
});