components/project-sidebar/ProjectCard.tsx

'use client';

import { ProjectBaseInfo } from '@/lib/fetch';
import { format } from 'date-fns';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { cn } from '@/lib/utils';
import Chip from '../ui/Chip';

export interface ProjectCardProps {
  projectInfo: ProjectBaseInfo;
}

export enum LabelType {
  BoundingBox = 'bounding_box',
  Segmentation = 'segmentation',
  Classification = 'classification',
  AnomalyDetection = 'anomaly_detection',
  SegmentationInstantLearning = 'segmentation_instant_learning',
}

const LabelTypeDisplayText: { [key: string]: string } = {
  [LabelType.BoundingBox]: 'detection',
  [LabelType.Segmentation]: 'segmentation',
  [LabelType.Classification]: 'classification',
  [LabelType.AnomalyDetection]: 'anomaly',
  [LabelType.SegmentationInstantLearning]: 'vp',
};

const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
  const { id, name, created_at, label_type, orgName, subscription } =
    projectInfo;

  const { projectId: projectIdFromParam } = useParams();

  const formattedDate = format(created_at, 'yyyy-MM-dd');
  return (
    <Link
      className={cn(
        'p-4 m-2 bg-background l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
        Number(projectIdFromParam) === id && 'border-gray-500',
      )}
      href={`/project/${id}`}
    >
      <div className="overflow-hidden w-full">
        <div className="flex items-center justify-between w-full">
          <p className="text-xs text-gray-500 truncate mr-2 truncate">
            {orgName}
          </p>
          <p className="text-xs text-gray-500 italic">{subscription}</p>
        </div>
        <div className="flex mb-1 items-center">
          <p className="text-sm font-medium text-gray mr-2 truncate">{name}</p>
          <Chip value={LabelTypeDisplayText[label_type]} />
        </div>
        <div className="flex items-center truncate">
          <p className="text-xs text-gray-500">{formattedDate}</p>
        </div>
      </div>
    </Link>
  );
};

export default ProjectCard;