iOS Toggle Switch

"use client";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

type State = "off" | "on" | "disabled";

export function IOSToggle({ state = "off" }: { state?: State }) {
const [on, setOn] = useState(state === "on");
useEffect(() => setOn(state === "on"), [state]);
const disabled = state === "disabled";

return (
  <div className="w-full max-w-md">
    <div className="space-y-4 rounded-xl border border-border bg-background/30 p-4">
      {[
        { label: "飛航模式", forced: false },
        { label: "Wi-Fi 自動連線", forced: true },
      ].map((row, idx) => {
        const value = idx === 0 ? on : true;
        return (
          <div key={row.label} className="flex items-center justify-between">
            <span className="text-sm text-foreground">{row.label}</span>
            <button
              onClick={() => idx === 0 && !disabled && setOn((v) => !v)}
              disabled={disabled && idx === 0}
              className={cn(
                "relative h-7 w-12 rounded-full transition-colors duration-200",
                value ? "bg-emerald-500" : "bg-zinc-600/40",
                disabled && idx === 0 && "opacity-50",
              )}
            >
              <span
                className={cn(
                  "absolute top-0.5 h-6 w-6 rounded-full bg-white shadow-md transition-transform duration-200",
                  value ? "translate-x-[22px]" : "translate-x-0.5",
                )}
              />
            </button>
          </div>
        );
      })}
    </div>
  </div>
);
}