"use client"

import { Prisma } from "@prisma/client";
import { useRouter } from "next/navigation";
import { startTransition } from "react";
import { Icons } from "./icons";
import { Button } from "./ui/button";

type likeType = Prisma.LikeUncheckedCreateInput
type postType = Prisma.PostUncheckedCreateInput

export default function LikeButton(props: { data: any }) {
  const router = useRouter();

  async function postLike(e: any) {
    e.preventDefault()
    const postLikeData = props.data;
    const likeData = {} as likeType
    likeData.userId = postLikeData.userId
    likeData.postId = postLikeData.id!

    const response = await fetch('http://localhost:3000/api/likes', {
      method: 'PUT',
      body: JSON.stringify(likeData)
    })

    startTransition(() => {
      // Refresh the current route and fetch new data from the server without
      // losing client-side browser or React state.
      router.refresh();
    });
    return await response.json()
  }

  return (
    <div>
      <form onSubmit={postLike}>
        <Button type="submit" variant="ghost" size="lg" className="float-right" >
          {props.data.likeCount}
          <Icons.heart className="h-3 w-3" />
        </Button>
      </form>
    </div>
  )
}