"use client"

import * as React from "react"
import { Moon, Sun, Monitor } from "lucide-react"
import { useTheme } from "next-themes"

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

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button 
          variant="ghost" 
          size="icon" 
          className="nav-button-transparent min-w-[44px] min-h-[44px] cursor-pointer"
          suppressHydrationWarning
        >
          {/* Simple icon transitions with consistent styling */}
          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all duration-500 ease-in-out dark:-rotate-180 dark:scale-0" />
          <Moon className="absolute h-5 w-5 rotate-180 scale-0 transition-all duration-500 ease-in-out dark:rotate-0 dark:scale-100" />
          
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      
      <DropdownMenuContent 
        align="end" 
        className="nav-dropdown-transparent"
        sideOffset={8}
      >
        <DropdownMenuItem 
          onClick={() => setTheme("light")} 
          className="flex items-center gap-3 nav-dropdown-item cursor-pointer"
        >
          <Sun className="h-4 w-4" />
          <span className="flex-1">Light</span>
          {theme === "light" && (
            <span className="text-xs font-medium">✓</span>
          )}
        </DropdownMenuItem>
        
        <DropdownMenuItem 
          onClick={() => setTheme("dark")} 
          className="flex items-center gap-3 nav-dropdown-item cursor-pointer"
        >
          <Moon className="h-4 w-4" />
          <span className="flex-1">Dark</span>
          {theme === "dark" && (
            <span className="text-xs font-medium">✓</span>
          )}
        </DropdownMenuItem>
        
        <DropdownMenuItem 
          onClick={() => setTheme("system")} 
          className="flex items-center gap-3 nav-dropdown-item cursor-pointer"
        >
          <Monitor className="h-4 w-4" />
          <span className="flex-1">System</span>
          {theme === "system" && (
            <span className="text-xs font-medium">✓</span>
          )}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}