/**
 * Recollection view switcher: Logos or Flux based on pathname.
 * Single container, conditional render — only the active view is mounted (no CSS flip).
 */

import React from 'react'
import { useLocation, useParams } from 'react-router-dom'
import { LogosPage } from './logos/LogosPage'
import { FluxRoute } from './flux/FluxRoute'

export function FlippingCardView() {
  const { pathname } = useLocation()
  const { recollectionId } = useParams<{ recollectionId: string }>()
  const isFlux = pathname.endsWith('/flux')

  return (
    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
      {isFlux ? (
        recollectionId ? (
          <FluxRoute />
        ) : null
      ) : (
        <LogosPage />
      )}
    </div>
  )
}