import React from "react";

/**
 * PhotoGrid — Instagram-style masonry grid for Docusaurus.
 *
 * Usage in any .mdx page:
 *
 *   import PhotoGrid from "@site/src/components/PhotoGrid";
 *
 *   <PhotoGrid
 *     photos={[
 *       "/img/gallery/cat-01.jpg",
 *       "/img/gallery/sunset-02.webp",
 *       "/img/gallery/meme-03.png",
 *     ]}
 *   />
 *
 * Props:
 *   photos   — string[]  — paths relative to /static (required)
 *   columns  — number    — desktop columns, default 3
 *   gap      — string    — grid gap, default "12px"
 */
export default function PhotoGrid({ photos = [], columns = 3, gap = "12px" }) {
  if (!photos.length) return null;

  return (
    <>
      <style>{`
        .photo-grid {
          column-count: ${columns};
          column-gap: ${gap};
        }
        .photo-grid__item {
          break-inside: avoid;
          margin-bottom: ${gap};
          cursor: pointer;
          display: block;
          border-radius: 6px;
          overflow: hidden;
          line-height: 0;
          transition: opacity 0.2s ease;
        }
        .photo-grid__item:hover {
          opacity: 0.85;
        }
        .photo-grid__item img {
          width: 100%;
          height: auto;
          display: block;
        }
        @media (max-width: 768px) {
          .photo-grid {
            column-count: 1 !important;
          }
        }
        @media (min-width: 769px) and (max-width: 1024px) {
          .photo-grid {
            column-count: 2 !important;
          }
        }
      `}</style>

      <div className="photo-grid">
        {photos.map((src, i) => (
          <a
            key={i}
            className="photo-grid__item"
            href={src}
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src={src} alt="" loading="lazy" />
          </a>
        ))}
      </div>
    </>
  );
}