Design a reusable React comment component

Design and implement a reusable comment input-and-feed component in React. Requirements: - Allow users to type a comment and submit it to append to the list. - Support deleting individual comments. - Implement backend pagination with infinite scroll; explain scroll detection (e.g., IntersectionObserver), deduplicating requests, end-of-list detection, and empty-state handling. - Model loading states (initial load, load-more, submit, delete) and error states; show appropriate UI. - Prevent duplicate submissions (UI disabling, in-flight tracking, debouncing, and/or idempotency keys) and discuss server-side considerations for idempotency. - Implement optimistic UI for posting and deleting: describe placeholder/tombstone items, reconciliation on success, rollback on failure, and conflict resolution. - Make the component extensible for both a video details page and a live chat/danmaku context; define component boundaries, props/interfaces, render overrides/slots, and discuss state management options (local state vs global store vs React Query), virtualization, throttling/backpressure, and performance under high-throughput updates. - Include accessibility (keyboard navigation, ARIA roles, focus management) and a testing plan (unit, integration, and mocked network).