chore: change styles and add Api for user profile

src/components/CountDownTimer.tsx

@@ -1,4 +1,6 @@
 import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toLocaleDigits } from '@/utils/persianDigit';
 
 interface CountdownTimerProps {
   initialSeconds: number;
@@ -9,30 +11,30 @@ export function CountDownTimer({
   initialSeconds,
   onComplete,
 }: CountdownTimerProps) {
+  const { i18n } = useTranslation();
   const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
 
   useEffect(() => {
     setSecondsLeft(initialSeconds);
-  }, [initialSeconds]);
 
-  useEffect(() => {
-    if (secondsLeft <= 0) {
-      onComplete?.();
-      return;
-    }
     const timer = setInterval(() => {
-      setSecondsLeft((prev) => prev - 1);
+      setSecondsLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          onComplete?.();
+          return 0;
+        }
+        return prev - 1;
+      });
     }, 1000);
-    return () => clearInterval(timer);
-  }, [secondsLeft, onComplete]);
 
-  const toPersianDigits = (str: string) =>
-    str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
+    return () => clearInterval(timer);
+  }, [initialSeconds, onComplete]);
 
   const formatTime = (totalSeconds: number) => {
     const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
     const seconds = String(totalSeconds % 60).padStart(2, '0');
-    return toPersianDigits(`${minutes}:${seconds}`);
+    return toLocaleDigits(`${minutes}:${seconds}`, i18n.language);
   };
 
   return <span>{formatTime(secondsLeft)}</span>;