Toggle im iOS-Stil

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

const spring = { type: "spring" as const, stiffness: 300, damping: 30 };

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

export default function IosToggle({
  color = "#34c759",
  checked,
  defaultChecked = true,
  onCheckedChange,
  label = "Aktivieren",
}: IosToggleProps) {
  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 h-8 w-14 items-center rounded-full p-1 transition-colors ${
        on ? "" : "bg-black/5 dark:bg-white/10"
      }`}
      style={on ? { backgroundColor: color } : undefined}
    >
      <motion.span
        className="h-6 w-6 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
        animate={{ x: on ? 24 : 0 }}
        transition={spring}
      />
    </button>
  );
}