"use client"

import { Heart } from 'lucide-react'
import type { Product } from '@homaroma/types'

import { useWishlistStore } from '../store/wishlistStore'

type WishlistButtonProps = {
  product: Product
}

export default function WishlistButton({ product }: WishlistButtonProps) {
  const isInWishlist = useWishlistStore((state) => state.isInWishlist(product.id))
  const toggleItem = useWishlistStore((state) => state.toggleItem)

  return (
    <button
      type="button"
      onClick={(event) => {
        event.preventDefault()
        event.stopPropagation()
        toggleItem(product)
      }}
      aria-label={isInWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
      className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-surface-card/90 shadow-sm backdrop-blur transition hover:scale-105 ${
        isInWishlist
          ? 'border-rose-200 text-rose-500'
          : 'border-line-primary/20 text-text-main hover:border-rose-200 hover:text-rose-500'
      }`}
    >
      <Heart className={`h-5 w-5 ${isInWishlist ? 'fill-current' : ''}`} />
    </button>
  )
}