import styles from './bottom-bar.module.scss'
import { Link } from '@inertiajs/react'
import { MdOutlineDashboardCustomize, MdManageAccounts } from 'react-icons/md'
import { FaPiggyBank } from 'react-icons/fa'
// import { BiLogOutCircle } from 'react-icons/bi'
import { BsCreditCardFill } from 'react-icons/bs'


const BottomBar = () => {
  const pathname = window.location.pathname
  const basePath = '/dashboard'
  return (
    <div className={styles['bottom__bar']}>
      <Link
        href="/dashboard/home"
        className={pathname === `${basePath}/home` ? styles['active'] : styles['link']}
      >
        <span>
          <MdOutlineDashboardCustomize />
        </span>
        <p>Home</p>
      </Link>

      <Link
        href="/dashboard/deposits"
        className={pathname === `${basePath}/deposits` ? styles['active'] : styles['link']}
      >
        <span>
          <BsCreditCardFill />
        </span>
        <p>Deposit</p>
      </Link>

      <Link
        href="/dashboard/withdrawals"
        className={pathname === `${basePath}/withdrawals` ? styles['active'] : styles['link']}
      >
        <span>
          <FaPiggyBank />
        </span>
        <p>Withdraw</p>
      </Link>

      <Link
        href="/dashboard/account"
        className={pathname === `${basePath}/account` ? styles['active'] : styles['link']}
      >
        <span>
          <MdManageAccounts />
        </span>
        <p>Account</p>
      </Link>
    </div>
  )
}

export default BottomBar