import { useEffect, useState } from 'react';
import Messages from './Messages';

function MessageInfo() {
  const [state, setState] = useState([]);

  const getData = async () => { 
    const response = await fetch("/sui/api/messages");
    const data = await response.json();
    setState(data);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div id="messageForm">
      {state.map((greetings, index) => (
          <Messages
            key={index}
            group={index+1}
            greeting={greetings.message}
            easterEgg={greetings.easteregg}
          />
      ))}
    </div>
  );
}

export default MessageInfo