import { MessageSquare, User } from "lucide-react";

interface Comment {
  id: string;
  authorName: string;
  content: string;
  createdAt: string;
}

interface CommentsListProps {
  comments: Comment[];
  locale: string;
}

function formatDate(dateStr: string, locale: string) {
  try {
    const date = new Date(dateStr);
    return date.toLocaleDateString(locale === "fa" ? "fa-IR" : "en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  } catch {
    return dateStr;
  }
}

export function CommentsList({ comments, locale }: CommentsListProps) {
  const isEn = locale === "en";

  if (comments.length === 0) {
    return (
      <div className="rounded-2xl border border-dashed border-gray-200 bg-gray-50/50 py-10 text-center">
        <MessageSquare className="mx-auto mb-3 h-8 w-8 text-gray-300" />
        <p className="text-sm text-gray-400">
          {isEn
            ? "No comments yet. Be the first to share your thoughts!"
            : "هنوز نظری ثبت نشده. اولین نفر باشید!"}
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h3 className="flex items-center gap-2 text-sm font-semibold text-gray-700">
        <MessageSquare className="h-4 w-4 text-brand-600" />
        {isEn
          ? `${comments.length} comment${comments.length !== 1 ? "s" : ""}`
          : `${comments.length} نظر`}
      </h3>

      <div className="space-y-3">
        {comments.map((comment) => (
          <div
            key={comment.id}
            className="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm"
          >
            <div className="mb-3 flex items-center gap-3">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50">
                <User className="h-4 w-4 text-brand-700" />
              </div>
              <div>
                <p className="text-sm font-semibold text-gray-900">
                  {comment.authorName}
                </p>
                <p className="text-xs text-gray-400">
                  {formatDate(comment.createdAt, locale)}
                </p>
              </div>
            </div>
            <p className="text-sm leading-relaxed text-gray-600">
              {comment.content}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}
