import React, { useRef, useEffect } from 'react';

const DistortedGrid = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let t = 0;
    const w = 400;
    const s = 3;

    const mag = (x, y) => Math.sqrt(x * x + y * y);

    const a = (x, y, t) => {
      const k = x / 8 - 25;
      const e = y / 8 - 25;
      const d = 2 * Math.cos(mag(k, e) / 3 - t);
      return [x + d * k, y + d * e];
    };

    const shuffle = (array) => {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    };

    const draw = () => {
      ctx.fillStyle = 'rgba(6, 6, 6, 0.1)';
      ctx.fillRect(0, 0, w, w);
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
      ctx.lineWidth = 0.5;

      for (let y = 100; y < 300; y += s) {
        for (let x = 100; x < 300; x += s) {
          const points = shuffle([
            a(x, y, t),
            a(x, y + s, t),
            a(x + s, y, t)
          ]);
          ctx.beginPath();
          ctx.moveTo(points[0][0], points[0][1]);
          ctx.lineTo(points[1][0], points[1][1]);
          ctx.stroke();
        }
      }

      t += 0.02;
      requestAnimationFrame(draw);
    };

    draw();
  }, []);

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-900">
      <div className="bg-gray-800 p-4 rounded-lg shadow-lg">
        <h2 className="text-xl font-bold text-white mb-4 text-center">Distorted Grid Visualization</h2>
        <canvas ref={canvasRef} width="400" height="400" className="border border-gray-700"></canvas>
      </div>
    </div>
  );
};

export default DistortedGrid;