'use client';

import { FaReply } from "react-icons/fa";
import { MessageSquare, Shield } from 'lucide-react';

export default function CommentList({ 
  comments, 
  article, 
  countTotalReplies, 
  renderReplies, 
  formatDate, 
  onReplyClick 
}) {

  if (comments.length === 0) {
    return (
      <div className="text-center py-12">
        <div className="bg-white/80 backdrop-blur-sm p-8 rounded-2xl border border-teal-100">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-linear-to-r from-teal-50 to-blue-50 mb-4">
            <MessageSquare className="w-8 h-8 text-teal-600" />
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Be the First to Comment</h3>
          <p className="text-gray-600 mb-4">No approved comments yet. Share your thoughts!</p>
          <div className="flex items-center justify-center gap-2 text-sm text-gray-500">
            <Shield className="w-4 h-4 text-teal-600" />
            <span>All comments are moderated for quality</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto">
      <div className="space-y-6">
        {comments.map(comment => {
          const totalReplies = countTotalReplies(comment.comment_id);
          
          return (
            <div 
              key={comment.comment_id} 
              className="bg-white/80 backdrop-blur-sm p-6 rounded-xl border border-teal-100 hover:border-teal-200 transition-all"
              id={`comment-${comment.comment_id}`}
            >
              <div className="flex justify-between items-start mb-4">
                <div className="flex items-center gap-3">
                  <div className="bg-linear-to-r from-teal-600 to-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center font-semibold text-lg shadow-sm">
                    {comment.first_name?.charAt(0)}{comment.last_name?.charAt(0)}
                  </div>
                  <div>
                    <h4 className="font-semibold text-lg text-gray-900">
                      {comment.first_name} {comment.last_name}
                    </h4>
                    <p className="text-gray-500 text-sm">
                      {formatDate(comment.created_at)}
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => onReplyClick(comment)}
                  className="text-teal-600 hover:text-teal-700 text-sm px-4 py-2 rounded-lg bg-teal-50 hover:bg-teal-100 transition-all flex items-center gap-2 border border-teal-100"
                >
                  <FaReply size={12} /> Reply
                </button>
              </div>

              <p className="text-gray-700 pl-16 leading-relaxed">{comment.comment}</p>
              
              {totalReplies > 0 && (
                <div className="pl-16 mt-3">
                  <button className="text-teal-600 text-sm font-medium hover:text-teal-700 transition-colors">
                    {totalReplies} {totalReplies === 1 ? 'reply' : 'replies'}
                  </button>
                </div>
              )}
              
              {renderReplies(comment.comment_id, true)}
            </div>
          );
        })}
      </div>
    </div>
  );
}