'use client'

import { useEffect, useRef } from 'react'
import { MessageBubble } from './MessageBubble'
import { MessageData } from 'lib/messages'

interface MessageListProps {
  messages: MessageData[]
  currentCodeId: string
}

export function MessageList({ messages, currentCodeId }: MessageListProps) {
  const messagesEndRef = useRef<HTMLDivElement>(null)

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages])

  if (messages.length === 0) {
    return (
      <div className="flex-1 flex items-center justify-center text-gray-500">
        <div className="text-center">
          <p className="text-lg font-medium">Zatím žádné zprávy</p>
          <p className="text-sm mt-1">Buďte první, kdo něco napíše!</p>
        </div>
      </div>
    )
  }

  return (
    <div className="flex-1 overflow-y-auto p-4 space-y-1">
      {messages.map((message) => (
        <MessageBubble
          key={message.id}
          message={message}
          isOwn={message.code_id === currentCodeId}
        />
      ))}
      <div ref={messagesEndRef} />
    </div>
  )
}