import React, { useEffect, useRef } from "react";
import { FlatList, View } from "react-native";
import { Message } from "../../types";
import { MessageBubble } from "./MessageBubble";

interface MessageListProps {
  messages: Message[];
}

export function MessageList({ messages }: MessageListProps) {
  const listRef = useRef<FlatList<Message>>(null);

  useEffect(() => {
    if (messages.length > 0) {
      // Small delay to allow layout to complete
      setTimeout(() => {
        listRef.current?.scrollToEnd({ animated: true });
      }, 50);
    }
  }, [messages.length]);

  return (
    <FlatList
      ref={listRef}
      data={messages}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <MessageBubble message={item} />}
      contentContainerStyle={{ paddingVertical: 12 }}
      onContentSizeChange={() => {
        listRef.current?.scrollToEnd({ animated: false });
      }}
      showsVerticalScrollIndicator={false}
      ListFooterComponent={<View style={{ height: 4 }} />}
    />
  );
}