import { FC } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Pages } from "../../../../config/Pages";
import type { ProjectItem } from "../types/ProjectTypes";
import { getProjectBackgroundStyle } from "../utils/getProjectBackgroundStyle";
import ProjectCardMenu from "./ProjectCardMenu";

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

const ProjectCard: FC<Props> = ({ project, onDelete }) => {
  const navigate = useNavigate();

  const handleEdit = () => {
    navigate(`${Pages.taskmanager.updateProject}${project.id}`);
  };

  return (
    <div className="bg-white rounded-[20px] overflow-hidden shadow-sm border border-border/40 p-3">
      <Link to={Pages.taskmanager.workspace + project.id}>
        <div className="h-[84px] w-full rounded-[16px]" style={getProjectBackgroundStyle(project)} />
      </Link>

      <div className="flex items-center justify-between mt-3.5">
        <Link to={Pages.taskmanager.workspace + project.id} className="text-sm font-medium text-black hover:opacity-70 transition-opacity">
          {project.name}
        </Link>

        <ProjectCardMenu onEdit={handleEdit} onDelete={() => onDelete(project)} />
      </div>
    </div>
  );
};

export default ProjectCard;
