"use client"

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useTranslations } from "next-intl"

export function ThemeSwitch() {
  const { setTheme } = useTheme();

  const t = useTranslations('themes');
    const themeLabels: Record<string, string> = {
      light: t('light'),
      dark: t('dark'),
      system: t('system'),
    }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
          <Moon className="absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          {themeLabels['light']}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          {themeLabels['dark']}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          {themeLabels['system']}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}