"use client"

import { Heart } from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"

interface FavoriteButtonProps {
  initialFavorited: boolean
}

export function FavoriteButton({ initialFavorited }: FavoriteButtonProps) {
  const [favorited, setFavorited] = useState(initialFavorited)

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