import { motion } from "motion/react";
import { Comment } from "../types/Comment";
import { format } from "date-fns";

function SessionCommentItem({ comment }: { comment: Comment }) {
  return (
    <motion.div layout className="flex gap-[0.833vw] items-end">
      <div className="relative flex flex-col gap-[0.556vw] p-[0.833vw] bg-white rounded-[0.833vw] w-full rounded-br-none">
        <p className="button-m font-medium">{comment.owner.fullname}</p>
        <div className="flex flex-col max-w-[19.583vw]">
          <p className="caption-s break-words whitespace-pre-wrap overflow-hidden">
            {comment.text}
          </p>
          <div className="flex justify-end w-full">
            <p className="caption-s text-[#BDBDBD] mt-[0.566vw] text-right">
              {format(comment.createdAt, "HH:mm")}
            </p>
          </div>
        </div>
      </div>
      <div className="bg-white size-[2.222vw] rounded-full flex-shrink-0" />
    </motion.div>
  );
}

export default SessionCommentItem;
