import { useChatStore } from "../store/chatStore";
import { NewChatPanel } from "./NewChatPanel";

export function ChatList() {
  const chats = useChatStore((s) => s.chats);
  const activeChatId = useChatStore((s) => s.activeChatId);
  const setActiveChatId = useChatStore((s) => s.setActiveChatId);

  return (
    <aside className="w-full max-w-xs border-r border-slate-700 bg-panel">
      <div className="border-b border-slate-700 p-3 text-sm font-semibold">Chats</div>
      <NewChatPanel />
      <div className="max-h-[calc(100vh-56px)] overflow-auto">
        {chats.map((chat) => (
          <button
            className={`block w-full border-b border-slate-800 px-3 py-3 text-left ${activeChatId === chat.id ? "bg-slate-800" : "hover:bg-slate-800/40"}`}
            key={chat.id}
            onClick={() => setActiveChatId(chat.id)}
          >
            <p className="font-medium">{chat.title || `${chat.type} #${chat.id}`}</p>
            <p className="text-xs text-slate-400">{chat.type}</p>
          </button>
        ))}
      </div>
    </aside>
  );
}