"use client"

import { Heart } from "lucide-react"
import { useState } from "react"
import { useRequireAuth } from "@/lib/use-require-auth"

interface PostLikeButtonProps {
  initialLiked: boolean
  initialCount: number
}

export function PostLikeButton({ initialLiked, initialCount }: PostLikeButtonProps) {
  const { requireAuth } = useRequireAuth()
  const [liked, setLiked] = useState(initialLiked)
  const [count, setCount] = useState(initialCount)

  return (
    <button
      type="button"
      className="flex items-center gap-1 hover:text-foreground transition-colors"
      onClick={() =>
        requireAuth(() => {
          setLiked((prevLiked) => {
            const nextLiked = !prevLiked
            setCount((prevCount) => (nextLiked ? prevCount + 1 : Math.max(0, prevCount - 1)))
            return nextLiked
          })
        })
      }
    >
      <Heart className={`h-4 w-4 ${liked ? "fill-red-500 text-red-500" : ""}`} />
      {count}
    </button>
  )
}