---
interface Props {
  productId: number;
  size?: 'sm' | 'md';
}

const { productId, size = 'sm' } = Astro.props;
const iconSize = size === 'sm' ? 'w-5 h-5' : 'w-6 h-6';
const btnSize = size === 'sm' ? 'p-1.5' : 'p-2';
---

<button
  class={`watchlist-btn ${btnSize} rounded-full transition-all duration-200 bg-white/10 text-white/60 hover:bg-white/20 hover:text-white`}
  data-product-id={productId}
  title="Voeg toe aan watchlist"
>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class={iconSize}>
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
  </svg>
</button>