reply to comment implemented

frontend/src/components/features/comments/CommentSection.tsx

@@ -4,8 +4,7 @@ import { useComments, useCreateComment } from '../../../queries/comments';
 import { Button } from '../../ui/button';
 import { Textarea } from '../../ui/textarea';
 import { Card, CardContent } from '../../ui/card';
-import { format } from 'date-fns';
-import { mk } from 'date-fns/locale';
+import { CommentItem } from './CommentItem';
 
 interface CommentSectionProps {
   articleId?: string;
@@ -99,29 +98,15 @@ export function CommentSection({ articleId, liveBlogId }: CommentSectionProps) {
             </p>
           </CardContent>
         </Card>
-      ) : (
+       ) : (
         <div className="space-y-6">
           {comments.map((comment) => (
-            <Card key={comment.id}>
-              <CardContent className="pt-6">
-                <div className="flex items-start justify-between mb-4">
-                  <div>
-                    <div className="font-medium">
-                      {comment.user?.username || 'Анонимен корисник'}
-                    </div>
-                    <div className="text-sm text-muted-foreground">
-                      {format(new Date(comment.createdAt), 'dd MMMM yyyy, HH:mm', { locale: mk })}
-                    </div>
-                  </div>
-                  {comment.user?.role === 'admin' && (
-                    <span className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary">
-                      Администратор
-                    </span>
-                  )}
-                </div>
-                <p className="whitespace-pre-wrap">{comment.content}</p>
-              </CardContent>
-            </Card>
+            <CommentItem
+              key={comment.id}
+              comment={comment}
+              articleId={articleId}
+              liveBlogId={liveBlogId}
+            />
           ))}
         </div>
       )}