components/chat-sidebar/ChatCard.tsx

'use client';

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

export interface ChatCardProps {
  chat: ChatEntity;
}

const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
  const { chatId: chatIdFromParam } = useParams();
  const { id, url, messages, user } = chat;
  return (
    <Link
      className={cn(
        'p-2 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 flex items-center">
        <Image
          src={url}
          alt={url}
          width={50}
          height={50}
          className="rounded w-1/4 "
        />
        <p className="text-xs text-gray-500 w-3/4 ml-2">
          {messages?.[0]?.content.slice(0, 50) + ' ...' ?? 'new chat'}
        </p>
      </div>
    </Link>
  );
};

export default ChatCard;