components/chat-sidebar/ChatCard.tsx

'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { cn } from '@/lib/utils';

export interface ChatCardProps {
	id: string;
	title: string;
}

const ChatCard: React.FC<ChatCardProps> = ({ id, title }) => {
	const { chatId: chatIdFromParam } = useParams();
	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',
				chatIdFromParam === id && 'border-gray-500',
			)}
			href={`/chat/${id}`}
		>
			<div className="overflow-hidden">
				<p className="text-sm font-medium text-black mb-1">{title}</p>
			</div>
		</Link>
	);
};

export default ChatCard;