import Layout from '../components/Layout';
import CardsPageView from '../components/CardsPageView';
import PublicCardsView from '../components/PublicCardsView';
import ProtectedRoute from '../components/ProtectedRoute';
import { useAuth } from '../lib/use-auth';
import { useCardsPage } from '../lib/use-cards-page.js';

function AuthenticatedCards() {
  const { user } = useAuth();
  const cardsPage = useCardsPage();

  if (cardsPage.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(--text-accent)' }} />
        </div>
      </Layout>
    );
  }

  return (
    <Layout user={user}>
      <CardsPageView {...cardsPage} />
    </Layout>
  );
}

export default function Cards() {
  return (
    <ProtectedRoute 
      allowPublic={true} 
      publicFallback={<PublicCardsView />}
    >
      <AuthenticatedCards />
    </ProtectedRoute>
  );
}