import React from "react";
import { Loader2 } from "lucide-react";
import { useTranslation } from "react-i18next";
import { useGetMergedRemarks } from "../components/hooks/useGetRemarks";
import { CommentCard } from "./WorkflowCommentHistory";
import { useLocalizedName } from "@/shared/common/localizedName";

interface RemarkListProps {
  instanceIds: string[];
  showFromText?: boolean;
}

const RemarkList: React.FC<RemarkListProps> = ({
  instanceIds,
  showFromText = true,
}) => {
  const { t } = useTranslation();
  const localizedName = useLocalizedName();
  const { mergedItems, isLoading, isError } = useGetMergedRemarks(instanceIds);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-10">
        <Loader2 className="h-6 w-6 animate-spin text-primary" />
      </div>
    );
  }

  if (isError) {
    return (
      <div className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-600 dark:border-red-900 dark:bg-red-950/20 dark:text-red-400">
        {t("remark.failedToLoad", "Failed to load remarks.")}
      </div>
    );
  }

  if (!mergedItems.length) {
    return <div></div>;
  }

  return (
    <div className="space-y-4">
      {mergedItems.map((remark) => (
        <CommentCard
          key={remark.id}
          createdAt={remark.createdAt}
          amharicCreatedAt={remark.createdAt}
          comment={remark.comment}
          assignerName={
            localizedName(remark.commentor?.employee?.name) || "Unknown User"
          }
          variant="secondary"
          showCommentTitle={false}
          showFromText={showFromText}
        />
      ))}
    </div>
  );
};

export default RemarkList;
