import React from "react";
import { View } from "react-native";
import { cn } from "../utils/cn";
import { Card } from "./card";
import { MutedText, Text } from "./text";
// Trend → delta text colour. Tokens only (success/destructive/muted) so each
// consuming app's palette flows through; no hardcoded hex.
const trendClass = {
    up: "text-success",
    down: "text-destructive",
    neutral: "text-muted-foreground dark:text-neutral-400",
};
/**
 * Map a trend direction to its delta text colour class. Pure so the
 * trend→colour contract is unit-testable without a render host.
 */
export function trendColorClass(trend) {
    return trendClass[trend];
}
/**
 * Dashboard stat tile: a label, a prominent value, an optional leading icon,
 * and an optional trend/delta line. Composes `Card` + `Text` so the surface,
 * border, and typography stay in lockstep with the rest of the system rather
 * than duplicating styles.
 */
export function StatCard({ label, value, icon, delta, trend = "neutral", className, }) {
    return (<Card className={cn("p-5", className)} accessibilityRole="summary">
      <View className="flex-row items-start justify-between">
        <MutedText className="text-sm">{label}</MutedText>
        {icon ? <View className="ml-2">{icon}</View> : null}
      </View>
      <Text className="mt-2 text-3xl font-bold text-foreground dark:text-white">{value}</Text>
      {delta ? <Text className={cn("mt-1 text-xs", trendColorClass(trend))}>{delta}</Text> : null}
    </Card>);
}
//# sourceMappingURL=stat-card.jsx.map