import Fancybox from "@components/FancyBox";
import Seperator from "@components/Seperator";
import SeperatorInner from "@components/SeperatorInner";
import Zoom from "@svg/Zoom";
import Image from "next/legacy/image";
import Link from "next/link";

const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`;

const toBase64 = (str: string) =>
  typeof window === "undefined"
    ? Buffer.from(str).toString("base64")
    : window.btoa(str);

const ProjectImages = ({ gallery, title }: any) => {
  return (
    <>
      <Seperator />
      <section>
        <div className="content-fluid">
          <div className="flex justify-center">
            <h2 className="section-header gradient-extra">
              <span className="z-index-1">Photos</span>
            </h2>
          </div>
          <SeperatorInner />
          <Fancybox
            options={{
              Carousel: {
                infinite: false,
              },
            }}
          >
            <div className="grid grid-cols-1 sm:grid-cols-4 gap-10">
              {gallery.map((image: string, index: number) => {
                return (
                  <Link
                    key={index}
                    data-fancybox="gallery"
                    href={image}
                    className="project-image-gallery-wrapper"
                  >
                    <Zoom />
                    <div className="overlay"></div>
                    <Image
                      priority={false}
                      blurDataURL={`data:image/svg+xml;base64,${toBase64(
                        shimmer(700, 475)
                      )}`}
                      placeholder="blur"
                      className="absolute object-cover project-gallery-image"
                      src={image}
                      layout="fill"
                      sizes="50vw"
                      alt={`Gallery Image ${title}`}
                    />
                  </Link>
                );
              })}
            </div>
          </Fancybox>
        </div>
      </section>
    </>
  );
};

export default ProjectImages;