import  { memo } from 'react'
import type { FC, ReactNode } from 'react'
<% if(data.children.length>0){ %>
import { useOutlet,useLocation } from 'react-router-dom'
import { SwitchTransition, CSSTransition } from 'react-transition-group'
<% }%>


interface Iprops {
  children?: ReactNode
}
const <%= data.PageName %>: FC<Iprops> = () => {
  <% if(data.children.length>0){ %>
    const currentOutlet = useOutlet()
    const location = useLocation()
  <% }%>

  return (
    <div>
    <%= data.PageName %>
    <% if(data.children.length>0){ %>
   {
    currentOutlet&&  <SwitchTransition mode="out-in">
    <CSSTransition key={location.pathname} timeout={300} classNames="fade" unmountOnExit>
      {currentOutlet}
    </CSSTransition>
  </SwitchTransition>
   }
    <% }%>
    </div>
  )
}

export default memo(<%= data.PageName %>)