components/sidebar/ProjectCard.tsx

'use client';

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

export interface ProjectCardProps {
	projectInfo: ProjectBaseInfo;
}

const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
	const {
		id,
		name,
		created_at,
		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>
				<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;