import logo from '@shared/assets/logo-full-white.png'
import styles from './Header.module.css'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { ROUTES } from '@shared/config/routes'

export function Header() {
  const location = useLocation()
  const navigate = useNavigate()

  const goToAbout = (e: React.MouseEvent) => {
    e.preventDefault()
    if (location.pathname === ROUTES.HOME) {
      document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' })
    } else {
      navigate(ROUTES.HOME, { state: { scrollTo: 'about' } })
    }
  }

  return (
    <nav className={styles.nav}>
      <a className={styles.logo} href="/">
        <img src={logo} alt="ЭКСА" />
      </a>
      <div className={styles.right}>
        <a className={styles.link} href="#about" onClick={goToAbout}>
          О нас
        </a>
        <Link className={styles.btn} to={ROUTES.WALLET}>
          Личный кабинет
        </Link>
      </div>
    </nav>
  )
}
