"use client";

import { useRouter } from "next/navigation";

import { ChatItem } from "@/components/widgets";
import { IChat } from "@/entities/chats/types";
import { useChatStore } from "@/providers/chat-store-provider";
import { ROUTES } from "@/shared/constants/client-routes";
import { formatTime } from "@/shared/utils/date";

import styles from "./CategoryChats.module.scss";

interface CategoryChatsProps {
  chats: IChat[];
  maxVisibleChats?: number;
  currentBalance?: number;
}

export default function CategoryChats({
  chats,
  maxVisibleChats = 3,
  currentBalance = 0,
}: CategoryChatsProps) {
  const router = useRouter();
  const setCurrentChat = useChatStore(state => state.setCurrentChat);

  return (
    <div className={styles.chats}>
      {chats.slice(0, maxVisibleChats).map(chat => (
        <ChatItem
          key={chat.id}
          className={styles.chat}
          userAvatar={{
            src: chat.assistantAvatar,
            alt: chat.assistantName,
            isOnline: chat.assistantStatus === "online",
          }}
          name={chat.assistantName}
          messagePreiew={
            chat.lastMessage
              ? {
                  message: {
                    type: chat.lastMessage.type,
                    content: chat.lastMessage.text,
                    sentWithZeroBalance: chat.lastMessage.sentWithZeroBalance,
                  },
                  currentBalance: currentBalance,
                }
              : null
          }
          time={formatTime(chat.updatedAt)}
          badgeContent={chat.unreadCount}
          onClick={() => {
            setCurrentChat(chat);
            router.push(ROUTES.chat(chat.assistantId));
          }}
        />
      ))}
    </div>
  );
}
