import Message from "./Message";

function Messages({ user, loading }) {
  return (
    <ul className="flex opacity-page flex-col gap-[24px] md:gap-[20px] lg:gap-[16px]">
      {user.messages.map((item, idx) => (
        <Message
          key={idx}
          idx={idx}
          data={item}
          loading={loading}
          length={user.messages.length}
        />
      ))}
    </ul>
  );
}

export default Messages;