From d47e9def4f41d3555d1abc45085bd05c274ea057 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 19:55:33 +0000
Subject: [PATCH] Add
 src/components/sections/metrics/MetricCardFourteenWithSaving.tsx

---
 .../metrics/MetricCardFourteenWithSaving.tsx  | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/components/sections/metrics/MetricCardFourteenWithSaving.tsx

diff --git a/src/components/sections/metrics/MetricCardFourteenWithSaving.tsx b/src/components/sections/metrics/MetricCardFourteenWithSaving.tsx
new file mode 100644
index 0000000..8c469fe
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardFourteenWithSaving.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { useWorkoutStorage } from '@/hooks/useWorkoutStorage';
+import MetricCardFourteen from './MetricCardFourteen';
+import { useEffect, useState } from 'react';
+
+interface MetricCardFourteenWithSavingProps {
+  title: string;
+  tag: string;
+  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
+  metrics: Array<{
+    id: string;
+    value: string;
+    description: string;
+  }>;
+  metricsAnimation: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
+  useInvertedBackground: boolean;
+}
+
+export function MetricCardFourteenWithSaving({
+  title,
+  tag,
+  tagAnimation,
+  metrics,
+  metricsAnimation,
+  useInvertedBackground,
+}: MetricCardFourteenWithSavingProps) {
+  const { metrics: userMetrics, updateMetrics } = useWorkoutStorage();
+  const [displayMetrics, setDisplayMetrics] = useState(metrics);
+
+  useEffect(() => {
+    if (userMetrics) {
+      // Dynamically update metrics based on saved data
+      const updatedMetrics = metrics.map(metric => {
+        let value = metric.value;
+        
+        if (metric.id === '1' && userMetrics.totalDistance > 0) {
+          // Update steps/distance metric
+          value = `${Math.round(userMetrics.totalDistance).toLocaleString()}+`;
+        } else if (metric.id === '2' && userMetrics.totalWeight > 0) {
+          // Update volume metric
+          value = `${Math.round(userMetrics.totalWeight)} kg`;
+        } else if (metric.id === '3' && userMetrics.totalDistance > 0) {
+          // Update distance metric
+          value = `${Math.round(userMetrics.totalDistance)}+ km`;
+        } else if (metric.id === '4' && userMetrics.consistency > 0) {
+          // Update consistency metric
+          value = `${userMetrics.consistency} days`;
+        }
+        
+        return { ...metric, value };
+      });
+      
+      setDisplayMetrics(updatedMetrics);
+    }
+  }, [userMetrics, metrics]);
+
+  return (
+    <MetricCardFourteen
+      title={title}
+      tag={tag}
+      tagAnimation={tagAnimation}
+      metrics={displayMetrics}
+      metricsAnimation={metricsAnimation}
+      useInvertedBackground={useInvertedBackground}
+    />
+  );
+}
+
+export default MetricCardFourteenWithSaving;
\ No newline at end of file