fix: theme

components/ThemeToggle.tsx

@@ -1,21 +1,33 @@
 "use client";
 
 import { useTheme } from "@/lib/theme";
-import { SunIcon, MoonIcon } from "./icons";
+import { SunIcon, MoonIcon, MonitorIcon } from "./icons";
+
+const LABELS = {
+  light: "حالت روشن",
+  dark: "حالت تاریک",
+  system: "حالت سیستم",
+};
+
+const ICONS = {
+  light: SunIcon,
+  dark: MoonIcon,
+  system: MonitorIcon,
+};
 
 export function ThemeToggle({ className }: { className?: string }) {
   const { theme, toggle } = useTheme();
-  const dark = theme === "dark";
+  const Icon = ICONS[theme];
 
   return (
     <button
       type="button"
       onClick={toggle}
-      aria-label={dark ? "حالت روشن" : "حالت تاریک"}
-      title={dark ? "حالت روشن" : "حالت تاریک"}
+      aria-label={LABELS[theme]}
+      title={LABELS[theme]}
       className={`rounded-lg p-2 text-muted transition hover:bg-surface-muted hover:text-foreground ${className ?? ""}`}
     >
-      {dark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+      <Icon className="h-5 w-5" />
     </button>
   );
 }