"use client";

export function Switch({
  checked,
  onChange,
  disabled,
}: {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={`relative w-11 h-6 rounded-(--radius-full) transition-colors duration-200 shrink-0 disabled:opacity-50 cursor-pointer ${
        checked ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
      }`}
    >
      {/* از insetInlineStart استفاده می‌کنیم (نه left/right) تا توی حالت RTL درست جابه‌جا بشه */}
      <span
        className="absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-(--shadow-cute-sm) transition-all duration-200"
        style={{ insetInlineStart: checked ? "22px" : "2px" }}
      />
    </button>
  );
}