nomadcode/apps/web/src/components/projects/ProjectCard.tsx

import { Bot, Briefcase, ExternalLink, History } from "lucide-react";

import type { Project } from "../../api/projects";
import { Button } from "../common/Button";
import { Card } from "../common/Card";

interface ProjectCardProps {
  project: Project;
  isSelected: boolean;
  onSelect: () => void;
  onOpenWorkspace: () => void;
  onOpenCodeServer: () => void;
  onCreateTask: () => void;
  onViewJobs: () => void;
}

export function ProjectCard({
  project,
  isSelected,
  onSelect,
  onOpenWorkspace,
  onOpenCodeServer,
  onCreateTask,
  onViewJobs,
}: ProjectCardProps) {
  return (
    <Card className={isSelected ? "project-card is-selected" : "project-card"}>
      <button className="project-card__select" type="button" onClick={onSelect}>
        <span className={`status-dot status-dot--${project.status}`} aria-hidden="true" />
        <span>
          <strong>{project.name}</strong>
          <small>{project.description}</small>
        </span>
      </button>
      <div className="project-card__meta">
        <span>{project.defaultAgent}</span>
        <span>{project.planeProject}</span>
      </div>
      <div className="project-card__actions">
        <Button type="button" size="sm" icon={<Briefcase size={15} aria-hidden="true" />} onClick={onOpenWorkspace}>
          Open Workspace
        </Button>
        <Button type="button" size="sm" variant="secondary" icon={<ExternalLink size={15} aria-hidden="true" />} onClick={onOpenCodeServer}>
          code-server
        </Button>
        <Button type="button" size="sm" variant="secondary" icon={<Bot size={15} aria-hidden="true" />} onClick={onCreateTask}>
          Agent Task
        </Button>
        <Button type="button" size="sm" variant="ghost" icon={<History size={15} aria-hidden="true" />} onClick={onViewJobs}>
          Jobs
        </Button>
      </div>
    </Card>
  );
}