"use client";

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

export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();
  const dark = resolvedTheme === "dark";
  return (
    <button
      className="rounded-full border border-white/20 bg-white/10 p-2 backdrop-blur-md"
      onClick={() => setTheme(dark ? "light" : "dark")}
      aria-label="切换主题"
    >
      <motion.div
        key={dark ? "dark" : "light"}
        initial={{ rotate: -20, opacity: 0 }}
        animate={{ rotate: 0, opacity: 1 }}
      >
        {dark ? <Sun size={16} /> : <Moon size={16} />}
      </motion.div>
    </button>
  );
}