import { View, Text } from "react-native";
import { ProgressBar } from "./ProgressBar";
import { ResetCountdown } from "./ResetCountdown";

interface UsageStatProps {
  label: string;
  percent: number;
  resetAtSeconds?: number;
  resetAtISO?: string;
}

export function UsageStat({ label, percent, resetAtSeconds, resetAtISO }: UsageStatProps) {
  return (
    <View className="gap-y-1.5 mb-4">
      <View className="flex-row justify-between items-center">
        <Text className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
          {label}
        </Text>
        <Text className="text-sm font-semibold text-neutral-900 dark:text-white">
          {Math.round(percent)}%
        </Text>
      </View>
      <ProgressBar percent={percent} />
      <ResetCountdown resetAtSeconds={resetAtSeconds} resetAtISO={resetAtISO} />
    </View>
  );
}