'use client'; import { useState, memo } from 'react' import "../style.css" import { Button } from '@repo/ui'; import { ButtonVariant, ButtonSize } from '@/types/types'; interface Comment { id: number; text: string; children: Comment[]; } interface CommentsProps { comment: Comment; onAddComment: (newComment: Comment, id: number) => void; onDeleteComment: (id: number) => void; } const Comments = memo(({ comment, onAddComment, onDeleteComment }: CommentsProps) => { const { id, text, children } = comment; const [isReplying, setIsReplying] = useState(false); const [checkReply, setCheckReply] = useState(false); const [newComment, setNewComment] = useState(''); const handleDeleteComment = (id : number) => { onDeleteComment(id); } const handleAddComment = (id: number, newComment: string) => { if (!newComment.trim()) return; setNewComment(''); const newCommentObject: Comment = { id: Date.now(), text: newComment, children: [] } onAddComment(newCommentObject, id); setIsReplying(false); } return (

{text}

{ isReplying && (

setNewComment(e.target.value)} autoFocus />

) } { children && children?.length > 0 && (

) } { !!children && checkReply && children?.map((child: Comment) => ( )) }

) }); Comments.displayName = 'Comments'; export default Comments;