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 Project = ({ defaultAltText, src, color, href, title }: any) => {
  return (
    <>
      {href && (
        <Link href={`${href}`} className="project-wrapper">
          {src && (
            <Image
              priority={false}
              blurDataURL={`data:image/svg+xml;base64,${toBase64(
                shimmer(700, 475)
              )}`}
              placeholder="blur"
              className="absolute object-cover project-image"
              src={src}
              layout="fill"
              sizes="50vw"
              alt={defaultAltText}
            />
          )}

          <h3 className={`project-content ${color && color}`}>
            {title && <span className="z-index-1">{title}</span>}
          </h3>
        </Link>
      )}
    </>
  );
};

export default Project;