'use client'

import CharacterHeader from './CharacterHeader'
import AIMessage from './AIMessage'
import UserMessage from './UserMessage'
import VirtualList from '@/components/ui/virtual-list'

export default function MessageList() {
  const itemList = [
    {
      type: 'header',
    },
    {
      type: 'aiMessage',
      data: {
        text: '"Hello, how are you?", *Long long ago*, ^there was a beautiful princess...^ (She was the most beautiful princess in the world)',
      },
    },
    {
      type: 'userMessage',
      data: {
        text: '"Hello, how are you?", Long long ago, there was a beautiful princess... (She was the most beautiful princess in the world)',
      },
    },
  ]

  const itemContent = (index: number, item: { type: string; data: any }) => {
    switch (item.type) {
      case 'aiMessage':
        return <AIMessage data={item.data} />
      case 'userMessage':
        return <UserMessage data={item.data} />
      case 'header':
        return <CharacterHeader />
      default:
        return null
    }
  }

  return (
    <div className="flex-1 replative">
      <VirtualList className="h-full" data={itemList} itemContent={itemContent} />
    </div>
  )
}
