Tactile State Machine Toggle Switch

import React, { useState } from 'react';
import { motion } from 'framer-motion';

export function InteractiveToggle({ checked = false, onChange }) {
  const [isOn, setIsOn] = useState(checked);

  const toggle = () => {
    const next = !isOn;
    setIsOn(next);
    onChange?.(next);
  };

  return (
    <button
      role="switch"
      aria-checked={isOn}
      onClick={toggle}
      className={`relative w-16 h-9 rounded-full p-1 transition-colors duration-300 ${
        isOn ? 'bg-violet-600' : 'bg-stone-800'
      }`}
    >
      <motion.div
        layout
        transition={{
          type: "spring",
          stiffness: 450,
          damping: 28,
        }}
        animate={{
          x: isOn ? 28 : 0,
          scaleX: [1, 1.25, 1],
        }}
        className="w-7 h-7 rounded-full bg-white shadow-md"
      />
    </button>
  );
}