import { FC } from "react";
import { useTranslation } from "react-i18next";
import type { ProjectItem } from "../types/ProjectTypes";
import ProjectCard from "./ProjectCard";

type Props = {
  projects: ProjectItem[];
  onDelete: (project: ProjectItem) => void;
};

const ProjectGrid: FC<Props> = ({ projects, onDelete }) => {
  const { t } = useTranslation("global");

  return (
    <div className="mt-6">
      <h2 className="text-sm font-bold mb-4">{t("taskmanager.projects")}</h2>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
        {projects.map((project) => (
          <ProjectCard key={project.id} project={project} onDelete={onDelete} />
        ))}
      </div>
    </div>
  );
};

export default ProjectGrid;
