import { Header } from '../components/Header';
import { ArticleCard } from '../components/ArticleCard';
import { useBookmarkStore } from '../stores/bookmarkStore';
import { Bookmark } from 'lucide-react';

export function BookmarksPage() {
  const { bookmarks } = useBookmarkStore();

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="flex items-center space-x-4 mb-8">
          <Bookmark size={24} className="text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">Мои закладки</h1>
        </div>

        {bookmarks.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {bookmarks.map((article) => (
              <ArticleCard key={article.id} article={article} />
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <Bookmark size={48} className="mx-auto text-gray-400 mb-4" />
            <h2 className="text-xl font-medium text-gray-900 mb-2">
              No bookmarks yet
            </h2>
            <p className="text-gray-500">
              Start bookmarking articles you want to read later
            </p>
          </div>
        )}
      </main>
    </div>
  );
}