"use client";

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

interface Props {
  isDark: boolean;
  onToggle: () => void;
}

export default function ThemeToggle({ isDark, onToggle }: Props) {
  return (
    <motion.button
      onClick={onToggle}
      className="relative w-14 h-7 rounded-full flex items-center cursor-pointer no-select"
      style={{
        background: isDark
          ? "rgba(99,102,241,0.3)"
          : "rgba(245,158,11,0.3)",
        border: `1px solid ${isDark ? "rgba(99,102,241,0.5)" : "rgba(245,158,11,0.5)"}`,
      }}
      whileTap={{ scale: 0.9 }}
    >
      <motion.div
        className="absolute w-5 h-5 rounded-full flex items-center justify-center"
        style={{
          background: isDark ? "#6366f1" : "#f59e0b",
          boxShadow: isDark
            ? "0 0 8px rgba(99,102,241,0.8)"
            : "0 0 8px rgba(245,158,11,0.8)",
        }}
        animate={{ x: isDark ? 2 : 28 }}
        transition={{ type: "spring", stiffness: 500, damping: 30 }}
      >
        {isDark ? (
          <Moon size={10} color="white" />
        ) : (
          <Sun size={10} color="white" />
        )}
      </motion.div>
    </motion.button>
  );
}