'use client';

import { Heart } from 'lucide-react';
import { useWishlist } from '@/presentation/providers/wishlist-provider';
import type { NewWishlistItem } from '@/domain/wishlist/entities';

interface WishlistButtonProps {
  item: NewWishlistItem;
  size?: 'sm' | 'md';
  className?: string;
}

export default function WishlistButton({ item, size = 'md', className = '' }: WishlistButtonProps) {
  const { toggleWishlist, isWishlisted } = useWishlist();
  const saved = isWishlisted(item.id);

  const sizeClasses = size === 'sm'
    ? 'h-8 w-8'
    : 'h-10 w-10';

  const iconSize = size === 'sm' ? 'h-4 w-4' : 'h-5 w-5';

  return (
    <button
      type="button"
      onClick={(e) => {
        e.stopPropagation();
        toggleWishlist(item);
      }}
      aria-label={saved ? 'Remove from wishlist' : 'Add to wishlist'}
      aria-pressed={saved}
      className={`group/wish flex items-center justify-center rounded-full border transition-all active:scale-95 ${sizeClasses} ${
        saved
          ? 'border-[#c99a2e] bg-[#c99a2e]/15 text-[#c99a2e] shadow-sm'
          : 'border-[#EDE6D9] bg-white/95 text-[#8A8478] hover:border-[#c99a2e]/50 hover:text-[#c99a2e]'
      } ${className}`}
    >
      <Heart
        className={`${iconSize} transition-transform group-hover/wish:scale-110 ${saved ? 'fill-[#c99a2e]' : ''}`}
      />
    </button>
  );
}