Toggle switch

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

interface ToggleSwitchProps {
  color?: string;
  size?: number;
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  label?: string;
}

export default function ToggleSwitch({
  color = "#0071e3",
  size = 36,
  checked,
  defaultChecked = true,
  onCheckedChange,
  label = "Turn on",
}: ToggleSwitchProps) {
  const [internal, setInternal] = useState(defaultChecked);
  const on = checked ?? internal;

  const toggle = () => {
    if (checked === undefined) setInternal(!on);
    onCheckedChange?.(!on);
  };

  return (
    <button
      type="button"
      role="switch"
      aria-checked={on}
      aria-label={label}
      onClick={toggle}
      className="flex shrink-0 items-center rounded-full p-1 transition-colors"
      style={{
        width: size * 1.85,
        height: size,
        backgroundColor: on ? color : "oklch(0.3 0.012 260)",
      }}
    >
      <motion.span
        className="rounded-full bg-white shadow"
        style={{ width: size - 8, height: size - 8 }}
        animate={{ x: on ? size * 0.85 : 0 }}
        transition={{ type: "spring", stiffness: 500, damping: 30 }}
      />
    </button>
  );
}