const CIRCLE_SIZE = 100;
const SPEED = 12;

function ReflectingCircle({ id, containerWidth, containerHeight }) {
	const circleRef = React.useRef(null);
	const animationFrameRef = React.useRef(null);
	const positionRef = React.useRef({ x: 0, y: 0, vx: 0, vy: 0 });

	React.useEffect(() => {
		const angle = Math.random() * Math.PI * 2;
		const vx = Math.cos(angle) * SPEED;
		const vy = Math.sin(angle) * SPEED;
		const x = Math.random() * (containerWidth - CIRCLE_SIZE);
		const y = Math.random() * (containerHeight - CIRCLE_SIZE);

		positionRef.current = { x, y, vx, vy };

		const animate = () => {
			const current = positionRef.current;
			current.x += current.vx;
			current.y += current.vy;

			// バウンド処理
			if (current.x <= 0 || current.x >= containerWidth - CIRCLE_SIZE) {
				current.vx *= -1;
			}
			if (current.y <= 0 || current.y >= containerHeight - CIRCLE_SIZE) {
				current.vy *= -1;
			}

			if (circleRef.current) {
				circleRef.current.style.transform = `translateX(${current.x}px) translateY(${current.y}px)`;
			}

			animationFrameRef.current = requestAnimationFrame(animate);
		};

		animationFrameRef.current = requestAnimationFrame(animate);

		return () => {
			if (animationFrameRef.current) {
				cancelAnimationFrame(animationFrameRef.current);
			}
		};
	}, [containerWidth, containerHeight, id]);

	return React.createElement(
		"div",
		{ className: "xeloc-bg-circle-container", ref: circleRef },
		React.createElement("div", { className: "xeloc-bg-circle-image" }),
	);
}