import { ProjectType } from "../../types";

type GalleryProjectsProps = {
  projects: ProjectType[];
};

const ProjectsSection = ({ projects }: GalleryProjectsProps) => {
  if (projects.length === 5) {
    return <FiveProjects projects={projects} />;
  }
  if (projects.length === 4) {
    return <FourProjects projects={projects} />;
  }

  return <ThreeProjects projects={projects} />;
};

const FiveProjects = ({ projects }: GalleryProjectsProps) => {
  const rows = [
    "row-span-2",
    "row-span-1",
    "row-span-3",
    "row-span-2",
    "row-span-1",
  ];

  return (
    <>
      <div
        className={`grid-cols-3 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
      >
        {projects.map((el, index) => {
          const row = rows[index];
          return (
            <div
              key={el.id}
              className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
            >
              <img
                src={el.imagePath}
                alt=""
                className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
              />
              <div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
                {el.title !== "" && <h4>{el.title}</h4>}
                {el.description !== "" && (
                  <p className="text-[16px] pt-4">{el.description}</p>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

const FourProjects = ({ projects }: GalleryProjectsProps) => {
  const rows = ["row-span-2", "row-span-1", "row-span-2", "row-span-1"];
  return (
    <>
      <div
        className={`grid-cols-2 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
      >
        {projects.map((el, index) => {
          const row = rows[index];
          return (
            <div
              key={el.id}
              className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
            >
              <img
                src={el.imagePath}
                alt=""
                className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
              />
              <div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
                {el.title !== "" && <h4>{el.title}</h4>}
                {el.description !== "" && (
                  <p className="text-[16px] pt-4">{el.description}</p>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

const ThreeProjects = ({ projects }: GalleryProjectsProps) => {
  const rows = ["row-span-2", "row-span-3", "row-span-1"];

  return (
    <>
      <div
        className={`grid-cols-2 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
      >
        {projects.map((el, index) => {
          const row = rows[index];
          return (
            <div
              key={el.id}
              className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
            >
              <img
                src={el.imagePath}
                alt=""
                className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
              />
              <div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
                {el.title !== "" && <h4>{el.title}</h4>}
                {el.description !== "" && (
                  <p className="text-[16px] pt-4">{el.description}</p>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default ProjectsSection;