/* ============================================================
   GLASS TOGGLE — Apple-style glass toggle switch
   ============================================================ */
import { cn } from "@/lib/utils";

interface GlassToggleProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  size?: "sm" | "md";
}

export default function GlassToggle({ checked, onChange, disabled, size = "md" }: GlassToggleProps) {
  const isSmall = size === "sm";

  return (
    <button
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={cn(
        "relative rounded-full transition-all duration-300 flex-shrink-0 focus:outline-none",
        isSmall ? "w-9 h-5" : "w-11 h-6",
        disabled && "opacity-40 cursor-not-allowed",
        checked
          ? "bg-[#00FFF6] shadow-[0_0_12px_rgba(0,255,246,0.5)]"
          : "bg-white/10 border border-white/15"
      )}
      style={{
        boxShadow: checked
          ? "0 0 16px rgba(0,255,246,0.4), inset 0 1px 0 rgba(255,255,255,0.3)"
          : "inset 0 1px 0 rgba(255,255,255,0.08)",
      }}
    >
      <span
        className={cn(
          "absolute top-0.5 rounded-full transition-all duration-300",
          isSmall ? "w-4 h-4" : "w-5 h-5",
          checked
            ? isSmall ? "left-[18px]" : "left-[22px]"
            : "left-0.5"
        )}
        style={{
          background: checked
            ? "#0a1a1a"
            : "rgba(255,255,255,0.7)",
          boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
        }}
      />
    </button>
  );
}