import { Bookmark } from 'lucide-react'

export default function ProgressTracker({ totalPages, currentPage, bookmarks }) {
  const progress = ((currentPage + 1) / totalPages) * 100

  return (
    <div className="mb-8">
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm font-medium text-gray-700">
          Page {currentPage + 1} of {totalPages}
        </span>
        <div className="flex items-center space-x-1">
          <Bookmark className="h-4 w-4 text-yellow-500" />
          <span className="text-sm text-gray-600">{bookmarks.size} bookmarks</span>
        </div>
        
        <div className="w-full bg-gray-200 rounded-full h-2">
          <div 
            className="bg-blue-600 h-2 rounded-full transition-all duration-300"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>
    </div>
  )
}