import Image from 'next/image'
import React from 'react'
import styles from './navbar.module.css'
import { CiViewTable } from 'react-icons/ci';
import { BsToggleOn, BsSearch } from 'react-icons/bs';
import { RxEyeClosed, RxEyeOpen } from 'react-icons/rx';
import { TbArrowWaveRightDown } from 'react-icons/tb';
import { CgProfile } from 'react-icons/cg';
import { RiBillLine } from 'react-icons/ri';
import { AiOutlineHome, AiOutlineBank } from 'react-icons/ai';



export default function Navbar() {
  return (
    <nav className={styles.navbar}>
      <div className={styles.left}>
        <div className={styles.logoDiv}>
          <Image
            src="/foldlogo.svg"
            alt="Fold Logo"
            className={styles.foldLogo}
            width={40}
            height={40}
            priority
          />
        </div>
        <div className={styles.actionsDiv}>
          <div className={styles.holder}>
            <CiViewTable
              className={styles.calendarLogo}
              size={20}
            />
          </div>
          <div className={styles.holder}>
            <RxEyeClosed
              className={styles.calendarLogo}
              size={20}
            />
            <BsToggleOn
              className={styles.calendarLogo}
              size={20}
            />
            <RxEyeOpen
              className={styles.calendarLogo}
              size={20}
            />
          </div>
          <div className={`${styles.holder} ${styles.search}`}>
            <BsSearch
              className={styles.calendarLogo}
              size={20}
            />
            <input
              className={styles.input}
              placeholder="Search anything"
              size={25}
            />
            <button
              className={styles.guidingButton}
            >
              cmd
            </button>
            <button
              className={styles.guidingButton}
            >
              k
            </button>
          </div>
        </div>
      </div>

      <div className={styles.right}>
        <div className={styles.actionsDiv}>
          <button
            className={styles.tabButton}
          >
            <AiOutlineHome
              className={styles.tabButtonIcon}
              size={20}
            />
            Home
          </button>
          <button
            className={styles.tabButton}
          >
            <RiBillLine
              className={styles.tabButtonIcon}
              size={20}
            />
            Transactions
          </button>
          <button
            className={styles.tabButton}
          >
            <TbArrowWaveRightDown
              className={styles.tabButtonIcon}
              size={20}
            />
            Cash Flow
          </button>
          <button
            className={styles.tabButton}
          >
            <AiOutlineBank
              className={styles.tabButtonIcon}
              size={20}
            />
            Banks
          </button>
        </div>
        <div className={styles.logoDiv}>
          <CgProfile
            className={styles.calendarLogo}
            size={38}
          />
        </div>
      </div>
    </nav>
  )
}