import { projects } from "../../consts/projects";

const projectStyles = [
  "xl:col-start-3 xl:col-end-7",
  "xl:col-span-4",
  "xl:col-start-5 xl:col-end-9",
  "xl:col-span-4",
  "xl:col-start-3 xl:col-span-4",
];

const InvestmentPortfolio = () => {
  return (
    <div className="grid grid-cols-12 xl:px-6 px-4 gap-4 2xl:gap-y-14 xl:gap-y-12 sm:gap-y-3 gap-y-5 2xl:pb-[140px] xl:pb-[120px] pb-[100px]">
      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-4 pb-3 text-caption-m">
        OUR INVESTMENT PORTFOLIO
      </div>
      {projects.map((project, index) => {
        const styles = `${projectStyles[index]} ${
          index % 2 === 0 ? "sm:col-start-1" : "sm:col-start-7"
        }`;

        return (
          <div
            className={`flex flex-col ${styles} sm:col-span-6 col-span-full`}
            key={project.id}
          >
            <img
              src={project.image}
              alt={project.title}
              className="rounded-2xl object-cover aspect-[5/3]"
            />
            <div className="flex gap-1 pt-3 items-center">
              <div className="rounded-full bg-[#00BED7] w-3 h-3"></div>
              <div className="text-m">{project.title}</div>
            </div>
            <div className="caption-m font-semibold text-[#73787C] pt-2">
              {project.city}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default InvestmentPortfolio;
