import type { MessagesResponse, UsersResponse } from "../../../types/pb_types";
import Avatar from "../Avatar";
import { FaRegClock } from "react-icons/fa";

export type MessageExpand = MessagesResponse<{
  author: UsersResponse;
}>;


export default function Message({ message }: { message: MessageExpand }) {
  if (!message.expand) return null;
  const author = message.expand.author;
  const avatarUrl = author.avatar ? import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100` : undefined;
  const date = new Date(message.created);
  const dateStr = `${date.getHours()}:${date.getMinutes()}`;

  return (
    <div className='flex justify-start p-4' key={message.id}>
      {message.expand && <Avatar avatarUrl={avatarUrl} firstName={author.firstname} lastName={author.lastname} />}
      <div className='flex flex-col items-start justify-center'>
        <div className='flex items-center my-4 ml-2 gap-2'>
          <p className="pr-2 py-2 border-b border-gray-200 text-xl text-gray-600">{author.firstname} {author.lastname}</p>
          <p className="flex gap-2 items-center"><FaRegClock />{dateStr}</p>
        </div>
        <div className='p-2 bg-gray-100 rounded-md '>
          <p>{message.content}</p>
        </div>
      </div>
    </div>
  )
}