'use client';

import React from 'react';
import { motion } from 'framer-motion';

import { CommentCard } from './comment-card';

import { api } from '@/lib/trpc/client';
import { Skeleton } from '@/components/ui/skeleton';

interface CommentsProps {
  postId: string;
  sortBy?: 'newest' | 'oldest' | 'popular';
}

export const Comments: React.FC<CommentsProps> = ({ postId, sortBy = 'newest' }) => {
  // const {
  //   data: comments,
  //   isLoading,
  //   error
  // } = api.comments.getCommentsByPostId.useQuery(
  //   {
  //     postId,
  //     sortBy
  //   },
  //   {
  //     enabled: !!postId // Only fetch if postId is provided
  //   }
  // );

  // if (isLoading) {
  //   return (
  //     <div className='w-full space-y-4'>
  //       {Array.from({ length: 3 }).map((_, index) => (
  //         <div key={index} className='relative mt-4 ml-6 block'>
  //           <div className='min-w-full rounded-lg p-3'>
  //             <Skeleton className='mb-2 h-5 w-3/4' />
  //             <Skeleton className='mb-4 h-4 w-1/4' />
  //             <Skeleton className='mb-2 h-4 w-full' />
  //             <Skeleton className='mb-4 h-4 w-5/6' />
  //             <div className='flex justify-end gap-8'>
  //               <Skeleton className='h-4 w-16' />
  //               <Skeleton className='h-4 w-20' />
  //               <Skeleton className='h-4 w-24' />
  //             </div>
  //           </div>
  //         </div>
  //       ))}
  //     </div>
  //   );
  // }

  // if (error) {
  //   return (
  //     <div className='text-muted-foreground w-full p-4 text-center'>
  //       Error loading comments: {error.message}
  //     </div>
  //   );
  // }

  // if (!comments || comments.length === 0) {
  //   return (
  //     <div className='text-muted-foreground w-full p-4 text-center'>
  //       No comments yet. Be the first to comment!
  //     </div>
  //   );
  // }

  return (
    // <div className='h-full w-full'>
    //   {comments.map((comment, index) => (
    //     <motion.div
    //       key={comment.id}
    //       initial={{ opacity: 0, y: 20, marginTop: 20 }}
    //       whileInView={{ opacity: 1, y: 0 }}
    //       transition={{ duration: 0.5, delay: index * 0.1 }}
    //     >
    //       <CommentCard
    //         key={comment.id}
    //         id={comment.id}
    //         postId={comment.postId}
    //         userId={comment.userId}
    //         parentId={comment.parentId}
    //         content={comment.content}
    //         upvotes={comment.upvotes}
    //         downvotes={comment.downvotes}
    //         repliesCount={comment.repliesCount}
    //         isEdited={comment.isEdited}
    //         isDeleted={comment.isDeleted}
    //         createdAt={comment.createdAt}
    //         updatedAt={comment.updatedAt}
    //         userName={comment.userName}
    //         userEmail={comment.userEmail}
    //         userImage={comment.userImage}
    //         replies={comment.replies}
    //       />
    //     </motion.div>
    //   ))}
    // </div>
    <div>
      <h1>Comments Wrapper</h1>
    </div>
  );
};