import Project from "@components/Project";
import Seperator from "@components/Seperator";
import SeperatorInner from "@components/SeperatorInner";

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 ProjectOtherProjects = ({ projects }: any) => {
  projects = projects.data;

  return (
    <>
      <Seperator />
      <section>
        <div className="content-fluid">
          <div className="flex justify-center">
            <h2 className="section-header gradient-extra">
              <span className="z-index-1">More Events</span>
            </h2>
          </div>
          <SeperatorInner />
          <div className="grid grid-cols-1 sm:grid-cols-4 gap-10">
            {projects.map((project: any, index: number) => {
              let defaultAltText = "Image Description";
              if (project.imageDescription) {
                defaultAltText = project.imageDescription;
              }

              return (
                <div className="other-project-wrapper" key={index}>
                  <Project
                    title={project.title}
                    defaultAltText={defaultAltText}
                    href={`/project/${project.slug}`}
                    color={project.color}
                    src={project.image}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
};

export default ProjectOtherProjects;