import React from 'react'
import styles from './index.module.scss'

import backImg from '@/assets/img/back.png'
import history, { toHomeFu } from '@/utils/history'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'

type Props = {
  backFu?: () => void
  txt: string
}

function TopCom({ backFu, txt }: Props) {
  const routerLength = useSelector((state: RootState) => state.A0Layout.routerLength)

  return (
    <div className={styles.TopCom} id='TopCom'>
      <img
        src={backImg}
        className='TCimg'
        alt=''
        onClick={() => {
          if (backFu) backFu()
          else routerLength ? history.go(-1) : toHomeFu()
        }}
      />
      {txt}
    </div>
  )
}

const MemoTopCom = React.memo(TopCom)

export default MemoTopCom
