import {BrowserRouter, BrowserRouterProps} from 'react-router'

import {NavigationManager} from '../../internal/navigation-manager'

import {TransitionContainer} from './transition-container'

/**
 * MinisRouter is the main routing component for Shop Minis that wraps React Router's BrowserRouter and provides optional support for smooth navigation transitions using the CSS View Transitions API. It should be placed at the root of your application to enable client-side routing.
 * @publicDocs
 */
export interface MinisRouterProps extends BrowserRouterProps {
  viewTransitions?: boolean
}

export function MinisRouter({
  children,
  viewTransitions = false,
  ...props
}: MinisRouterProps) {
  if (viewTransitions) {
    return (
      <BrowserRouter {...props}>
        <NavigationManager />
        <TransitionContainer>{children}</TransitionContainer>
      </BrowserRouter>
    )
  }

  return (
    <BrowserRouter {...props}>
      <NavigationManager />
      {children}
    </BrowserRouter>
  )
}