import type { BlogPostComment } from "@/data/blog-post-detail";
import DataLink from "@/components/common/DataLink";
import Image from "next/image";

export default function BlogPostComments({
  title,
  comments,
}: {
  title: string;
  comments: BlogPostComment[];
}) {
  return (
    <div className="comments-area" id="comments">
      <h2 className="comments-title">{title}</h2>
      {comments.map((comment) => (
        <div key={comment.id} className={comment.boxClass}>
          <div className="gravatar">
            <Image
              src={comment.avatar.src}
              alt={comment.avatar.alt}
              width={comment.avatar.width}
              height={comment.avatar.height}
            />
          </div>
          <div className="comment-content">
            <div className="comment-meta">
              <h3 className="comment-author">{comment.author}</h3>
              <span className="comment-time">{comment.date}</span>
              <DataLink className="comment-reply-link" href="#" title="">
                Reply
                <Image
                  src={comment.replyArrow.src}
                  alt={comment.replyArrow.alt}
                  width={comment.replyArrow.width}
                  height={comment.replyArrow.height}
                />
              </DataLink>
            </div>
            <div className="comment-reply">
              <p>{comment.body}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}