import React, { useEffect, useState } from "react";

const BackgroundImages = () => {
  const [images, setImages] = useState([]);

  // List of background images to use
  const bgImages = [
    "/bg-ims/tux-large.webp",
    "/bg-ims/kitty.png",
    "/bg-ims/bash-logo.png",
    "/bg-ims/nixoslogo.png",
    "/bg-ims/Archlinux_600x600.png",
    "/bg-ims/blahaj.png",
    "/bg-ims/blahaj.png",
    "/bg-ims/blahaj.png",
    "/bg-ims/blahaj.png",
    "/bg-ims/blahaj.png",
  ];

  useEffect(() => {
    // Generate 30 random positioned images
    const randomImages = [];
    for (let i = 0; i < 30; i++) {
      randomImages.push({
        src: bgImages[Math.floor(Math.random() * bgImages.length)],
        top: Math.random() * 90 + 5, // 5-95% from top
        left: Math.random() * 90 + 5, // 5-95% from left
        size: Math.random() * 100 + 50, // 50-150px
        rotation: Math.random() * 40 - 20, // -20 to 20 degrees
        opacity: Math.random() * 0.2 + 0.1, // 0.1-0.3 opacity
      });
    }
    setImages(randomImages);
  }, []);

  return (
    <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
      {images.map((img, index) => (
        <div
          key={index}
          className="absolute"
          style={{
            top: `${img.top}%`,
            left: `${img.left}%`,
            transform: `translate(-50%, -50%) rotate(${img.rotation}deg)`,
          }}
        >
          <img
            src={img.src}
            alt=""
            style={{
              width: `${img.size}px`,
              height: `${img.size}px`,
              opacity: img.opacity,
              objectFit: "contain",
            }}
          />
        </div>
      ))}
    </div>
  );
};

export default BackgroundImages;
