'use client';

import { Separator } from '@/components/ui/Separator';
import { ChatMessage } from '@/components/chat/ChatMessage';
import { MessageBase } from '../../lib/types';
import { Session } from 'next-auth';
import { IconExclamationTriangle } from '../ui/Icons';
import Link from 'next/link';

export interface ChatList {
  messages: MessageBase[];
  session: Session | null;
}

export function ChatList({ messages, session }: ChatList) {
  return (
    <div className="relative mx-auto max-w-5xl px-8 pr-12">
      {!session && (
        <>
          <div className="group relative mb-4 flex items-center">
            <div className="bg-background flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow">
              <IconExclamationTriangle />
            </div>
            <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
              <p className="text-muted-foreground leading-normal">
                Please{' '}
                <Link href="/sign-in" className="underline">
                  log in
                </Link>{' '}
                to save and revisit your chat history!
              </p>
            </div>
          </div>
          <Separator className="my-4" />
        </>
      )}
      {messages
        // .filter(message => message.role !== 'system')
        .map((message, index) => (
          <div key={index}>
            <ChatMessage message={message} />
            {index < messages.length - 1 && (
              <Separator className="my-4 md:my-8" />
            )}
          </div>
        ))}
    </div>
  );
}