import React, { useContext, useState } from 'react';
import reactLogo from '@/assets/react.svg';
import {connect} from 'react-redux';

import { Outlet,useNavigate } from 'react-router-dom'; 
function Layout(props:any) { 
    const navigate = useNavigate();  
    // const store = useContext();
    const [name,setname] = useState(props.name);
    const topage = (path:any)=>{
        navigate(path, { replace: true });
    }
  return (
    <>
      <div> 
        <div>
          <em>{name}</em>: is come form Redux
        </div>
        <div>
         <a onClick={()=>topage('/home')}>home</a>
         <a onClick={()=>{topage('/about')}}>about</a>
        </div>
        <div> 
           <Outlet />
        </div>
       </div> 
    </>
  );
}
const mapStateToProps = (state:any)=>(
    {
        name:state.name
    }
)
const mapDispachToProps = (dispach)=>(
    {
        getName(payload){
            dispach({
                 type:'getname',
                 value:payload.target.value
            })
        }  
    }
)

export default connect(mapStateToProps,mapDispachToProps)(Layout);