1import { Moon, Sun } from "lucide-react"
 2
 3import {
 4    Button,
 5    DropdownMenu,
 6    DropdownMenuContent,
 7    DropdownMenuItem,
 8    DropdownMenuTrigger,
 9} from "@marzneshin/components"
10import { useTheme } from "../theme-provider"
11import { useTranslation } from "react-i18next"
12
13export function ThemeToggle() {
14    const { setTheme } = useTheme()
15    const { t } = useTranslation()
16    return (
17        <DropdownMenu>
18            <DropdownMenuTrigger asChild>
19                <Button variant="outline" className="bg-secondary-foreground text-primary-foreground" size="icon">
20                    <Sun className="transition-all scale-100 rotate-0 dark:scale-0 dark:-rotate-90 h-[1rem] w-[1rem]" />
21                    <Moon className="absolute transition-all scale-0 rotate-90 dark:scale-100 dark:rotate-0 h-[1rem] w-[1rem]" />
22                    <span className="sr-only">Toggle theme</span>
23                </Button>
24            </DropdownMenuTrigger>
25            <DropdownMenuContent align="end">
26                <DropdownMenuItem onClick={() => setTheme("light")}>
27                    {t('light')}
28                </DropdownMenuItem>
29                <DropdownMenuItem onClick={() => setTheme("dark")}>
30                    {t('dark')}
31                </DropdownMenuItem>
32                <DropdownMenuItem onClick={() => setTheme("system")}>
33                    {t('system')}
34                </DropdownMenuItem>
35            </DropdownMenuContent>
36        </DropdownMenu>
37    )
38}