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 Services = ({ services }: any) => {
  const defaultAltText = "Image Description";

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2  gap-8">
      {services.map((service: any, index: any) => {
        return (
          <div key={index}>
            {service.slug && (
              <Link
                href={`/service/${service.slug}`}
                className="services-box-wrapper"
              >
                <div className="services-box">
                  {service.title && (
                    <h3 className="service-title">{service.title}</h3>
                  )}
                  {service.overlayColor && (
                    <div className={`overlay ${service.overlayColor}`}></div>
                  )}
                  {service.image && (
                    <Image
                      priority={false}
                      blurDataURL={`data:image/svg+xml;base64,${toBase64(
                        shimmer(700, 475)
                      )}`}
                      placeholder="blur"
                      className="service-image"
                      src={service.image}
                      layout="fill"
                      sizes="50vw"
                      alt={service.imageDescription || defaultAltText}
                    />
                  )}
                </div>
              </Link>
            )}
          </div>
        );
      })}
    </div>
  );
};

export default Services;