import React from 'react';

const Collections: React.FC = () => {
  return (
    <div>
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Collections</h1>
          <p className="text-gray-600 mt-2">
            Organize and manage your trading card collections
          </p>
        </div>
        <button className="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
          New Collection
        </button>
      </div>

      <div className="bg-white rounded-lg shadow border border-gray-200 p-8">
        <div className="text-center">
          <span className="text-6xl mb-4 block">📚</span>
          <h3 className="text-xl font-semibold text-gray-900 mb-2">
            No collections yet
          </h3>
          <p className="text-gray-600 mb-6">
            Create your first collection to start organizing your cards
          </p>
          <button className="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-md font-medium transition-colors">
            Create Collection
          </button>
        </div>
      </div>
    </div>
  );
};

export default Collections;