import ProjectWithinCard from "@/components/property-details/ProjectWithinCard";

export interface ProjectWithinItem {
  image: string;
  hoverImage?: string;
  title: string;
  status: string;
  /** Resolved icon URL for status. When using Strapi: e.g. getStrapiImageUrl(project.statusIcon?.url). Card falls back to /icons/projects/updates.svg if omitted. */
  statusIcon?: string;
  slug?: string;
  propertyType?: string;
}

interface ProjectsWithinProps {
  projects: ProjectWithinItem[];
}

const ProjectsWithin = ({ projects }: ProjectsWithinProps) => {
  if (!projects?.length) {
    return null;
  }

  return (
    <section className="container mx-auto py-8 md:py-12 lg:py-16 xl:py-20 2xl:py-24">
      <div className="px-5 2xl:px-0">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-10 justify-items-center">
          {projects.map((project, index) => (
            <ProjectWithinCard
              key={project.slug ?? index}
              image={project.image}
              hoverImage={project.hoverImage}
              title={project.title}
              status={project.status}
              statusIcon={project.statusIcon}
              slug={project.slug}
              propertyType={project.propertyType}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProjectsWithin;