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;
}

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

  const { projectId: projectIdFromParam } = useParams();

  const formattedDate = format(created_at, 'yyyy-MM-dd');
  return (
    <Link
      className={cn(
        'p-4 m-2 bg-white 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">
        <p className="text-xs text-gray-500">{orgName}</p>
        <p className="text-sm font-medium text-black mb-1">{name}</p>
        <p className="text-xs text-gray-500">{formattedDate}</p>
      </div>
    </Link>
  );
};

export default ProjectCard;