ThemeToggle.tsx

import React from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Moon, Sun, Globe } from 'lucide-react';\nimport { useTheme } from '@/hooks/useTheme';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuCheckboxItem,\n} from '@/components/ui/dropdown-menu';\n\nconst ThemeToggle = () => {\n  const { theme, direction, isDark, setTheme, setDirection } = useTheme();\n\n  return (\n    <DropdownMenu>\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        title=\"إعدادات المظهر\"\n      >\n        {isDark ? (\n          <Moon className=\"w-5 h-5\" />\n        ) : (\n          <Sun className=\"w-5 h-5\" />\n        )}\n      </Button>\n\n      <DropdownMenuContent align=\"end\" className=\"w-56\">\n        <DropdownMenuLabel>المظهر</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n\n        <DropdownMenuCheckboxItem\n          checked={theme === 'light'}\n          onCheckedChange={() => setTheme('light')}\n        >\n          <Sun className=\"w-4 h-4 ml-2\" />\n          فاتح\n        </DropdownMenuCheckboxItem>\n\n        <DropdownMenuCheckboxItem\n          checked={theme === 'dark'}\n          onCheckedChange={() => setTheme('dark')}\n        >\n          <Moon className=\"w-4 h-4 ml-2\" />\n          غامق\n        </DropdownMenuCheckboxItem>\n\n        <DropdownMenuCheckboxItem\n          checked={theme === 'system'}\n          onCheckedChange={() => setTheme('system')}\n        >\n          <Globe className=\"w-4 h-4 ml-2\" />\n          تلقائي\n        </DropdownMenuCheckboxItem>\n\n        <DropdownMenuSeparator />\n        <DropdownMenuLabel>الاتجاه</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n\n        <DropdownMenuCheckboxItem\n          checked={direction === 'rtl'}\n          onCheckedChange={() => setDirection('rtl')}\n        >\n          من اليمين لليسار (RTL)\n        </DropdownMenuCheckboxItem>\n\n        <DropdownMenuCheckboxItem\n          checked={direction === 'ltr'}\n          onCheckedChange={() => setDirection('ltr')}\n        >\n          من اليسار لليمين (LTR)\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n\nexport default ThemeToggle;\n