import { ThreadedCommentSection } from './components/comments-threaded';

interface ThreadedCommentSectionProps {
  // Entity identification (provide ONE of these)
  entity?: Entity | undefined | null;
  entityId?: string | undefined | null;
  foreignId?: string | undefined | null;
  shortId?: string | undefined | null;

  // Optional features
  isVisible?: boolean;
  highlightedCommentId?: string | undefined | null;
  theme?: 'light' | 'dark';   // Only for inline styles variant
  children?: React.ReactNode;
}

<ThreadedCommentSection
  entity={{
    id: "entity_123",
    projectId: "proj_456",
    foreignId: "post-789",
    // ... other entity fields
  }}
/>

<ThreadedCommentSection entityId="entity_123" />

<ThreadedCommentSection foreignId="blog-post-789" />

<ThreadedCommentSection shortId="my-first-post" />

const [showComments, setShowComments] = useState(false);

<ThreadedCommentSection
  entityId="post_123"
  isVisible={showComments}
/>

<ThreadedCommentSection
  entityId="post_123"
  highlightedCommentId="comment_456"
/>

<ThreadedCommentSection
  entityId="post_123"
  theme={isDark ? 'dark' : 'light'}
/>

<ThreadedCommentSection entityId="post_123">
  <div className="text-center text-gray-500 my-4">
    Join the discussion!
  </div>
</ThreadedCommentSection>

<ThreadedCommentSection foreignId="blog-post-123" />

function BlogPost({ post }) {
  const [isDark, setIsDark] = useState(false);

  return (
    <>
      <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
      <ThreadedCommentSection
        foreignId={post.id}
        theme={isDark ? 'dark' : 'light'}
      />
    </>
  );
}

import { useSearchParams } from 'react-router-dom';

function BlogPost({ post }) {
  const [searchParams] = useSearchParams();

  return (
    <ThreadedCommentSection
      foreignId={post.id}
      highlightedCommentId={searchParams.get('commentId')}
    />
  );
}

// URL: /blog/my-post?commentId=comment_abc123
// → highlights comment_abc123 on load

function BlogPost({ postId }) {
  const [searchParams] = useSearchParams();
  const [showComments, setShowComments] = useState(true);
  const [isDark, setIsDark] = useState(false);
  const { data: entity } = useFetchEntity({ foreignId: postId });

  return (
    <>
      <button onClick={() => setShowComments(!showComments)}>
        {showComments ? 'Hide' : 'Show'} Comments
      </button>

      <ThreadedCommentSection
        entity={entity}
        isVisible={showComments}
        highlightedCommentId={searchParams.get('commentId')}
        theme={isDark ? 'dark' : 'light'}
      >
        <div className="text-center text-sm text-gray-500 my-2">
          Be respectful in the discussion
        </div>
      </ThreadedCommentSection>
    </>
  );
}