"use client"

import { Button } from "@/components/ui/button"
import { useRequireAuth } from "@/lib/use-require-auth"
import { useAuthStore } from "@/store/auth"
import { useFavoriteStore } from "@/store/favorites"
import { Heart } from "lucide-react"

interface FavoriteButtonProps {
  initialFavorited: boolean
  targetType: "player" | "shop"
  targetId: string
}

export function FavoriteButton({ initialFavorited, targetType, targetId }: FavoriteButtonProps) {
  const { requireAuth } = useRequireAuth()
  const userId = useAuthStore((s) => s.user?.id)
  const favoritedInStore = useFavoriteStore((state) =>
    userId ? state.isFavorited(userId, targetType, targetId) : false,
  )
  const toggleFavorite = useFavoriteStore((state) => state.toggleFavorite)
  const favorited = userId ? favoritedInStore : initialFavorited

  return (
    <Button
      variant={favorited ? "default" : "outline"}
      size="sm"
      className="gap-1.5"
      onClick={() =>
        requireAuth(() => {
          if (!userId) return
          toggleFavorite(userId, targetType, targetId)
        })
      }
    >
      <Heart className={`h-4 w-4 ${favorited ? "fill-current" : ""}`} />
      {favorited ? "已收藏" : "收藏"}
    </Button>
  )
}