import Layout from '../components/Layout';
import CollectionsPageView from '../components/CollectionsPageView';
import { useAuth } from '../lib/use-auth';
import { useCollectionsPage } from '../lib/use-collections-page.js';

export default function Collections() {
  const { user, loading: authLoading } = useAuth();
  const collectionsPage = useCollectionsPage({ user, authLoading });

  if (collectionsPage.showInitialLoading) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--accent-ember)' }} />
        </div>
      </Layout>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <Layout user={user}>
      <CollectionsPageView {...collectionsPage} />
    </Layout>
  );
}