Toggle Switch

"use client";

import { useState } from "react";
import { motion, useReducedMotion } from "framer-motion";

export function ToggleSwitch({ label }: { label: string }) {
  const [checked, setChecked] = useState(false);
  const shouldReduceMotion = useReducedMotion();

  return (
    <label className="flex items-center gap-3 cursor-pointer select-none">
      <motion.button
        role="switch"
        aria-checked={checked}
        onClick={() => setChecked((v) => !v)}
        className={`relative h-6 w-11 shrink-0 rounded-full transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 dark:focus-visible:outline-emerald-400 ${
          checked ? "bg-emerald-700" : "bg-stone-300 dark:bg-stone-700"
        }`}
      >
        <motion.span
          animate={{ x: checked ? 22 : 2 }}
          transition={
            shouldReduceMotion
              ? { duration: 0 }
              : { type: "spring", stiffness: 700, damping: 32 }
          }
          className="absolute top-0.5 block h-5 w-5 rounded-full bg-white shadow-sm"
        />
      </motion.button>
      <span className="text-sm text-stone-700 dark:text-stone-200">{label}</span>
    </label>
  );
}