"use client";

import { useState } from "react";

export function RunawayLoginButton({ enabled }: { enabled: boolean }) {
  const [offset, setOffset] = useState({ x: 0, y: 0 });

  const moveButton = () => {
    if (!enabled) {
      return;
    }

    setOffset({
      x: Math.round((Math.random() - 0.5) * 260),
      y: Math.round((Math.random() - 0.5) * 140)
    });
  };

  return (
    <button
      className="btn contact-submit runaway-login-button"
      onFocus={moveButton}
      onMouseEnter={moveButton}
      style={{ transform: `translate(${offset.x}px, ${offset.y}px)` }}
      type="submit"
    >
      Login
    </button>
  );
}