'use client';

import { MediaDetails } from '@/lib/fetch';
import useChatWithMedia from '@/lib/hooks/useChatWithMedia';
import React from 'react';
import { ChatList } from '../chat/ChatList';
import { ChatScrollAnchor } from '../chat/ChatScrollAnchor';
import { ChatPanel } from '../chat/ChatPanel';

export interface ChatProps {
  mediaList: MediaDetails[];
}

const Chat: React.FC<ChatProps> = ({ mediaList }) => {
  const { messages, append, reload, stop, isLoading, input, setInput } =
    useChatWithMedia(mediaList);
  return (
    <>
      <ChatList messages={messages} />
      <ChatScrollAnchor trackVisibility={isLoading} />
      <ChatPanel
        isLoading={isLoading}
        stop={stop}
        append={append}
        reload={reload}
        messages={messages}
        input={input}
        setInput={setInput}
      />
    </>
  );
};

export default Chat;