import { Box, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import { useEffect, useRef } from "react";
import MessageBubble from "../messageBubble";

export default function ChatInterface({ messages }) {
  const theme = useTheme();
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages]);

  return (
    <>
      <Box
        mb={2}
        display="flex"
        flexDirection="column"
        flexGrow={1}
        padding={2}
        style={{
          border: "2px solid black",
          overflow: "hidden",
          overflowY: "scroll",
          borderRadius: "8px",
          border: "1px solid #ccc",
          backgroundColor: theme.palette.background.default,
        }}
      >
        {messages.map((message, index) => (
          <MessageBubble
            key={index}
            text={message.text}
            isSender={message.isSender}
          />
        ))}
      </Box>
      
    </>
  );
}