import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { motion } from "framer-motion";
import { cn } from "~/lib/utils";

export const ThemeSwitch = () => {
  const { theme, setTheme } = useTheme();

  const spring = {
    type: "spring",
    stiffness: 700,
    damping: 30,
  };

  return (
    <button
      aria-label="Toggle Theme"
      type="button"
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      className={cn(
        `flex h-10 w-20 rounded-full bg-neutral-200 p-[5px] shadow-inner hover:cursor-pointer dark:bg-neutral-700`,
        theme == "light" && "place-content-end",
      )}
    >
      <motion.div
        className={cn(
          "flex size-8 items-center justify-center rounded-full bg-black/90",
          //theme == "light" && "bg-sky-500",
        )}
        layout
        transition={spring}
      >
        <motion.div whileTap={{ rotate: 360 }}>
          {theme == "light" ? (
            <Sun className="size-6 stroke-yellow-300" />
          ) : (
            <Moon className="size-6 stroke-slate-200" />
          )}
        </motion.div>
      </motion.div>
    </button>
  );
};
