FastComments.tsx

import { useEffect, useState } from 'react';
import { useUser } from '@clerk/clerk-react';
import { FastCommentsCommentWidget } from 'fastcomments-react';
import { useCommentsSSO } from '../hooks/useCommentsSSO';

interface FastCommentsProps {
  urlId: string;
  tenantId: string;
}

interface FastCommentsSSO {
  loginURL?: string;
  logoutURL?: string;
  userDataJSONBase64?: string;
  verificationHash?: string;
  timestamp?: number;
  readonly?: boolean;
  authenticated?: boolean;
}

export function FastComments({ urlId, tenantId }: FastCommentsProps) {
  const { user } = useUser();
  const { data: ssoData, isLoading } = useCommentsSSO();
  const [sso, setSSO] = useState<FastCommentsSSO>({
    loginURL: '/sign-in'
  });

  useEffect(() => {
    if (ssoData && user) {
      setSSO({
        ...ssoData
      });
    }
  }, [ssoData, user]);

  if (isLoading) {
    return null;
  }

  return (
    <div className="bg-white rounded-xl shadow-sm overflow-hidden" data-testid="fastcomments-widget">
      <div className="p-6">
        <h2 className="text-xl font-semibold text-gray-900 mb-6">Comments</h2>
        <FastCommentsCommentWidget
          tenantId={tenantId}
          urlId={urlId}
          sso={sso}
          noImageUploads={true}
        />
      </div>
    </div>
  );
}