"use client"

import { togglePostLike } from "@/lib/api/posts"
import { useRequireAuth } from "@/lib/use-require-auth"
import { usePostStore } from "@/store/posts"
import { Heart } from "lucide-react"

interface PostLikeButtonProps {
  postId: string
}

export function PostLikeButton({ postId }: PostLikeButtonProps) {
  const { requireAuth } = useRequireAuth()
  const post = usePostStore((state) => state.posts.find((item) => item.id === postId))

  if (!post) {
    return null
  }

  return (
    <button
      type="button"
      className="flex items-center gap-1 hover:text-foreground transition-colors"
      onClick={() =>
        requireAuth(() => {
          togglePostLike(postId)
        })
      }
    >
      <Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
      {post.likeCount}
    </button>
  )
}