ToggleCraft

"use client";

import { useState, type CSSProperties, type InputHTMLAttributes } from "react";
import { motion, useReducedMotion } from "motion/react";

type ToggleCraftProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked" | "defaultChecked" | "onChange" | "className"> & {
  /** Text next to the switch. */
  label: string;
  /** Small text under the label. */
  hint?: string;
  /** On or off (controlled). */
  checked?: boolean;
  /** On or off at start (uncontrolled). */
  defaultChecked?: boolean;
  /** Called with the new state. */
  onChange?: (checked: boolean) => void;
  /** Colour of the on state. */
  accent?: string;
  /** Wrapper look (width etc.). */
  className?: string;
};

/* ToggleCraft: a switch built on a real checkbox. The knob stretches while pressed like a soft bead, then springs across while colour spreads out from under it. */
export function ToggleCraft({
  label,
  hint,
  checked,
  defaultChecked = false,
  onChange,
  accent = "#a78bfa",
  className = "w-full max-w-xs",
  ...rest
}: ToggleCraftProps) {
  const reduce = useReducedMotion();
  const [inner, setInner] = useState(defaultChecked);
  const [pressed, setPressed] = useState(false);
  const on = checked ?? inner;
  const stretch = pressed && !reduce ? 6 : 0;
  const spring = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 520, damping: 30 };

  return (
    <label
      style={{ "--tc": accent } as CSSProperties}
      onPointerDown={() => setPressed(true)}
      onPointerUp={() => setPressed(false)}
      onPointerLeave={() => setPressed(false)}
      onPointerCancel={() => setPressed(false)}
      className={`flex cursor-pointer select-none items-center justify-between gap-4 has-disabled:cursor-not-allowed has-disabled:opacity-50 ${className}`}
    >
      <span className="min-w-0">
        <span className="block text-[15px] font-medium text-white">{label}</span>
        {hint && <span className="mt-0.5 block text-[13px] text-white/50">{hint}</span>}
      </span>
      <span className="relative shrink-0">
        <input
          type="checkbox"
          role="switch"
          checked={on}
          onChange={(e) => {
            if (checked === undefined) setInner(e.target.checked);
            onChange?.(e.target.checked);
          }}
          className="peer sr-only"
          {...rest}
        />
        <span className="relative block h-8 w-14 overflow-hidden rounded-full bg-white/12 transition-shadow duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--tc)] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[#0b0a14] motion-reduce:transition-none">
          <motion.span
            aria-hidden
            className="absolute inset-0 bg-[var(--tc)]"
            initial={false}
            animate={{ clipPath: on ? "circle(72px at 44px 50%)" : "circle(0px at 16px 50%)" }}
            transition={reduce ? { duration: 0 } : { duration: 0.32, ease: [0.2, 0.8, 0.2, 1] }}
          />
          <motion.span
            aria-hidden
            className="absolute top-1 left-1 h-6 rounded-full bg-white shadow-md shadow-black/30"
            initial={false}
            animate={{ x: on ? 24 - stretch : 0, width: 24 + stretch }}
            transition={spring}
          />
        </span>
      </span>
    </label>
  );
}