import Message from "./Message";

function Messages({ user, loading }) {
  const messages = user?.messages ?? [];

  if (messages.length === 0) {
    return (
      <p className="text-[#7E7E7E] opacity-page text-[14px] md:text-[16px] font-medium text-center py-[56px]">
        پیامی ندارید.
      </p>
    );
  }

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

export default Messages;