import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Check, Monitor, Moon, Sun } from "lucide-react";
import { useTheme } from "./theme-provider";

const themeLabels = { light: "Light", dark: "Dark", system: "System" };

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

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <Button
            variant="outline"
            className="ino:h-9 ino:cursor-pointer ino:gap-2 ino:rounded-md ino:bg-card ino:px-3 ino:font-medium ino:text-foreground"
          />
        }
      >
        <span className="ino:relative ino:size-4 ino:shrink-0">
          <Sun className="ino:absolute ino:inset-0 ino:size-4 ino:scale-100 ino:rotate-0 ino:transition-all ino:dark:scale-0 ino:dark:-rotate-90" />
          <Moon className="ino:absolute ino:inset-0 ino:size-4 ino:scale-0 ino:rotate-90 ino:transition-all ino:dark:scale-100 ino:dark:rotate-0" />
        </span>
        <span className="ino:text-sm">{themeLabels[theme] ?? "Theme"}</span>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="ino:min-w-36">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          <Sun className="ino:size-4" />
          Light
          {theme === "light" && <Check className="ino:ml-auto ino:size-4" />}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          <Moon className="ino:size-4" />
          Dark
          {theme === "dark" && <Check className="ino:ml-auto ino:size-4" />}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          <Monitor className="ino:size-4" />
          System
          {theme === "system" && <Check className="ino:ml-auto ino:size-4" />}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}