import { Outlet, useLocation } from 'react-router-dom'

/**
 * Wraps <Outlet> with a fade-in animation keyed to the route path.
 * When the route changes, React unmounts/remounts the wrapper div,
 * triggering the CSS animation. Sidebar and topbar stay still.
 *
 * Uses flex-1 + min-h-0 to fill the main content area exactly.
 * overflow-y-auto enables scrolling for normal pages while full-height
 * pages (tree editor, etc.) use their own overflow:hidden to take
 * the exact container height without scrolling.
 */
export function ViewTransitionOutlet() {
  const location = useLocation()

  // Use the first two path segments as the key to avoid re-animating
  // on param changes within the same page (e.g., /trees/123 → /trees/456)
  const segments = location.pathname.split('/').filter(Boolean)
  const routeKey = segments.slice(0, 2).join('/') || '/'

  return (
    <div key={routeKey} className="flex-1 min-h-0 flex flex-col animate-fade-in-up">
      <Outlet />
    </div>
  )
}