"use client";

import * as React from "react";
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";

export function ModeToggle() {
  const { resolvedTheme, setTheme } = useTheme();

  return (
    <div>
      <Button
        variant="outline"
        size="icon"
        onClick={() => {
          if (resolvedTheme == "light") {
            setTheme("dark");
          } else {
            setTheme("light");
          }
        }}
      >
        {resolvedTheme === "dark" ? <Moon /> : <Sun />}
      </Button>
    </div>
  );
}