// "use client"

// import { zodResolver } from "@hookform/resolvers/zod";
// import { useForm } from "react-hook-form";
// import * as z from "zod";

// import { Button } from "@/components/ui/button";
// import {
//     Form,
//     FormControl,
//     FormDescription,
//     FormField,
//     FormItem,
//     FormLabel,
//     FormMessage,
// } from "@/components/ui/form";

// import { Textarea } from "@/components/ui/textarea";
// import { toast } from "@/components/ui/use-toast";
// import { FormEvent, Fragment, useEffect, useState } from "react";

// import CommentItem from "./comment-item";
// import { Icons } from "./icons";
// import { Card } from "./ui/card";
// import { Separator } from "./ui/separator";
// import { Skeleton } from "./ui/skeleton";

// const FormSchema = z.object({
//     gweet: z
//         .string()
//         .min(1, { message: "Come on post something...", })
//         .max(1000, { message: "Gweets cannot be more that 1000 characters.", }),
// })

// export function PostCommentForm(props: { postid: string }) {
//     const [isGweetLoading, setIsGweetLoading] = useState<boolean>(false);
//     const [isLoading, setIsLoading] = useState<boolean>(false);
//     const [messages, setMessages] = useState<any[]>([]);

//     const form = useForm<z.infer<typeof FormSchema>>({
//         resolver: zodResolver(FormSchema),
//     })

//     async function onCommentGweet(data: z.infer<typeof FormSchema>) {
//         setIsGweetLoading(true);

//         await fetch('/api/comments', {
//             method: 'POST',
//             body: JSON.stringify(props.postid)
//         })

//         toast({
//             title: "Your comment is being processed...",
//             description: (
//                 <pre className="mt-2 w-[340px] rounded-md bg-slate-600 p-4">
//                     <code className="text-white">{JSON.stringify(data, null, 2)}</code>
//                 </pre>
//             ),
//         })

//         setIsGweetLoading(false);
//         form.setValue('gweet', '');
//         await fetchMessages();
//     }

//     async function fetchMessages() {
//         setIsLoading(true);

//         try {
//             const res = await fetch(`/api/comments?postid=${props.postid}`);

//             if (!res.ok) {
//                 throw new Error("Failed to fetch comments");
//             }

//             const data = await res.json();

//             setMessages(data);
//         } catch (error) {
//             return toast({
//                 variant: "destructive",
//                 title: "Uh oh! Something went wrong.",
//                 description: "Failed to fetch messages. Please try again.",
//             });
//         }

//         setIsLoading(false);
//     }

//     useEffect(() => {
//         fetchMessages();
//     }, []);

//     async function onSubmit(event: FormEvent<HTMLFormElement>) {
//         event.preventDefault();
//         await fetchMessages();
//     }

//     // console.log((messages[0] as IPost).user.image);
//     return (
//         <div>
//             {/* <PostItem msg={(messages[0])} /> */}
//             <Form {...form}>
//                 <form onSubmit={form.handleSubmit(onCommentGweet)} className="space-y-6">
//                     <FormField
//                         control={form.control}
//                         name="gweet"
//                         render={({ field }) => (
//                             <FormItem>
//                                 <FormLabel>Comment</FormLabel>
//                                 <FormControl>
//                                     <Textarea
//                                         placeholder="What's on your mind?"
//                                         className="resize-none"
//                                         disabled={isGweetLoading}
//                                         {...field}
//                                     />
//                                 </FormControl>
//                                 <FormDescription>
//                                     Your comment will be public, and everyone can see them.
//                                 </FormDescription>
//                                 <FormMessage />
//                             </FormItem>
//                         )}
//                     />
//                     <Button type="submit" disabled={isGweetLoading}>Submit</Button>
//                 </form>
//             </Form>
//             <Card className="w-full h-full overflow-hidden p-6 md:p-12 mt-12">
//                 <form onSubmit={onSubmit}>
//                     <Button disabled={isLoading} type="submit" className="w-full mb-6">
//                         {isLoading && (
//                             <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
//                         )}
//                         Load More
//                     </Button>

//                     {messages.length > 0 ? (
//                         messages.map((message: any) => (
//                             <Fragment key={message.id}>
//                                 <CommentItem msg={message} />
//                                 <Separator className="mt-3 mb-6" />
//                             </Fragment>
//                         ))
//                     ) : (
//                         <>
//                             {Array.from({ length: 4 }, (_, i) => i + 1).map((i) => (
//                                 <>
//                                     <div className="flex">
//                                         <Skeleton className="h-10 w-10 rounded-full" />
//                                         <div className="ml-4 flex flex-col flex-grow">
//                                             <div>
//                                                 <div className="flex items-center">
//                                                     <div className="mx-auto w-full space-y-6">
//                                                         <Skeleton className="h-[30px] w-1/4" />
//                                                         <Skeleton className="h-[20px] w-2/3" />
//                                                         <Skeleton className="h-[20px] w-full" />
//                                                     </div>
//                                                 </div>
//                                             </div>
//                                         </div>
//                                     </div>
//                                     <Separator className="mt-3 mb-6" />
//                                 </>
//                             ))}
//                         </>
//                     )}
//                 </form>
//             </Card>
//         </div>
//     )
// }