Comment System - Copy this React, Tailwind Component to your project

The design of the comments system in this structure follows a hierarchical format with top level comments and nested replies. Here’s a breakdown of the design: 1. **Top Level Comments**: Each comment is represented as an object containing details such as `id`, `content`, `userID`, `noteID` (indicating the note or post the comment is related to), `parentCommentID` (null for top level comments), `createdAt` (timestamp), and a `User` object that includes user details like `id`, `fullName`, `userName`, and `avatar` URL. The main comments can contain **replies**, which are structured as nested arrays. 2. **Nested Replies**: Replies to a comment are embedded within the `replies` array of each comment object. Each reply has a similar structure to the top level comment, with details like `id`, `content`, `userID`, `parentCommentID` (points to the parent comment), and user information. These replies can also have their own replies, allowing for multiple layers of nested discussions, creating a tree like structure of comments within comments. 3. **User Information**: The `User` object within each comment or reply includes the user’s `fullName`, `userName`, and `avatar` image URL, allowing comments to display personalized information for each commenter. 4. **Data Format**: The entire comments data is structured as an array within the `data` property of the state, allowing easy access and iteration through comments and their nested replies. The `status` and `message` properties provide a way to manage the API response, indicating if the fetching of comments was successful. This design supports a multi level comment system where replies can be nested infinitely, allowing users to engage in threaded discussions.