import { Bookmark } from 'lucide-react';
import { useBookmarkStore } from '../stores/bookmarkStore';
import { Article } from '../types';

interface BookmarkButtonProps {
  article: Article;
  className?: string;
}

export function BookmarkButton({ article, className = '' }: BookmarkButtonProps) {
  const { isBookmarked, addBookmark, removeBookmark } = useBookmarkStore();
  const bookmarked = isBookmarked(article.id);

  const handleBookmark = () => {
    if (bookmarked) {
      removeBookmark(article.id);
    } else {
      addBookmark(article);
    }
  };

  return (
    <button
      onClick={handleBookmark}
      className={`group relative p-2 rounded-full hover:bg-gray-100 transition-colors ${className}`}
      aria-label={bookmarked ? 'Remove from bookmarks' : 'Add to bookmarks'}
    >
      <Bookmark
        size={20}
        className={`transition-colors ${
          bookmarked ? 'fill-blue-600 text-blue-600' : 'text-gray-500 group-hover:text-gray-700'
        }`}
      />
      <span className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
        {bookmarked ? 'Убрать закладку' : 'Добавить закладку'}
      </span>
    </button>
  );
}