tududi/frontend/components/Project/ProjectItem.tsx

import React from "react";
import { Link } from "react-router-dom";
import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
import { Project } from "../../entities/Project";
import { useTranslation } from "react-i18next";

interface ProjectItemProps {
  project: Project;
  viewMode: "cards" | "list";
  color: string;
  getCompletionPercentage: () => number;
  activeDropdown: number | null;
  setActiveDropdown: React.Dispatch<React.SetStateAction<number | null>>;
  handleEditProject: (project: Project) => void;
  setProjectToDelete: React.Dispatch<React.SetStateAction<Project | null>>;
  setIsConfirmDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const getProjectInitials = (name: string) => {
  const words = name
    .trim()
    .split(" ")
    .filter((word) => word.length > 0);
  if (words.length === 1) {
    return name.toUpperCase();
  }
  return words.map((word) => word[0].toUpperCase()).join("");
};

const ProjectItem: React.FC<ProjectItemProps> = ({
  project,
  viewMode,
  color,
  getCompletionPercentage,
  activeDropdown,
  setActiveDropdown,
  handleEditProject,
  setProjectToDelete,
  setIsConfirmDialogOpen,
}) => {
  const { t } = useTranslation();
  return (
    <div
      className={`${
        viewMode === "cards"
          ? "bg-gray-50 dark:bg-gray-900 rounded-lg shadow-md relative flex flex-col"
          : "bg-gray-50 dark:bg-gray-900 rounded-lg shadow-md relative flex flex-row items-center p-4"
      }`}
      style={{
        minHeight: viewMode === "cards" ? "250px" : "auto",
        maxHeight: viewMode === "cards" ? "250px" : "auto",
      }}
    >
      {viewMode === "cards" && (
        <div
          className="bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden rounded-t-lg relative"
          style={{ height: "140px" }}
        >
          {project.image_url ? (
            <img
              src={project.image_url}
              alt={project.name}
              className="w-full h-full object-cover"
            />
          ) : (
            <span 
              className="text-2xl font-extrabold text-gray-500 dark:text-gray-400 opacity-20"
              aria-label={t("projectItem.projectInitials")}
            >
              {getProjectInitials(project.name)}
            </span>
          )}
          <div
            className={`absolute top-2 left-2 w-3 h-3 rounded-full ${color}`}
          ></div>
        </div>
      )}

      {viewMode === "list" && project.image_url && (
        <div className="w-16 h-16 mr-4 flex-shrink-0">
          <img
            src={project.image_url}
            alt={project.name}
            className="w-full h-full object-cover rounded-md"
          />
        </div>
      )}

      <div
        className={`flex justify-between items-start ${
          viewMode === "cards" ? "p-4 flex-1" : "flex-1"
        }`}
      >
        <div className="flex items-center">
          {viewMode === "list" && !project.image_url && (
            <div className={`w-3 h-3 rounded-full ${color} mr-3 flex-shrink-0`}></div>
          )}
          <Link
            to={`/project/${project.id}`}
            className={`${
              viewMode === "cards"
                ? "text-lg font-semibold text-gray-900 dark:text-gray-100 hover:underline line-clamp-2"
                : "text-md font-semibold text-gray-900 dark:text-gray-100 hover:underline"
            }`}
          >
            {project.name}
          </Link>
        </div>
        <div className="relative">
          <button
            className="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-400 focus:outline-none"
            onClick={() =>
              setActiveDropdown(
                activeDropdown === project.id ? null : project.id ?? null
              )
            }
            aria-label={t("projectItem.toggleDropdownMenu")}
          >
            <EllipsisVerticalIcon className="h-5 w-5" />
          </button>

          {activeDropdown === project.id && (
            <div className="absolute right-0 mt-2 w-28 bg-white dark:bg-gray-700 shadow-lg rounded-md z-10">
              <button
                onClick={() => handleEditProject(project)}
                className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left"
              >
                {t("projectItem.edit")}
              </button>
              <button
                onClick={() => {
                  setProjectToDelete(project);
                  setIsConfirmDialogOpen(true);
                  setActiveDropdown(null);
                }}
                className="block px-4 py-2 text-sm text-red-500 dark:text-red-300 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left"
              >
                {t("projectItem.delete")}
              </button>
            </div>
          )}
        </div>
      </div>

      {viewMode === "cards" && (
        <div className="absolute bottom-4 left-0 right-0 px-4">
          <div className="flex items-center space-x-2">
            <div 
              className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"
              title={t("projectItem.completionPercentage", { percentage: getCompletionPercentage() })}
            >
              <div
                className="bg-blue-500 h-2 rounded-full"
                style={{
                  width: `${getCompletionPercentage()}%`,
                }}
              ></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ProjectItem;