'use client'
import ChatInterface from './_components/ChatInterface'
import AnimatedPageTitle from '../_components/Animated/AnimatedPageTitle';
import { useTimeLine } from '../_providers/GsapProvicer';
import { useMessages } from '../_providers/MessagesProvider';
import { Spinner } from '~/components/ui/spinner';

export default function ChatPage() {
	const {messages,session,isLoading,error} = useMessages()
	useTimeLine(messages)
	return (
		<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10 pb-4">
					<AnimatedPageTitle position={0}>
						<span>Talk To My </span> <span> AI-Assistant</span>
					</AnimatedPageTitle>
					<div className='flex flex-1 min-h-0 w-full'>
					{!isLoading &&
					<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
					}
					{isLoading &&
						<><Spinner/> Loading Messages...</>
					}
					{error &&
						<div> {error} </div>
					}
					</div>
		</div>
	)
}