import { createElement } from 'react'
import { NavLink } from 'react-router-dom'
import { SITE_SOCIAL } from '../data/socialLinks.js'

function getNavLinkClassName({ isActive }) {
  return ['topnav__link', isActive ? 'is-active' : null].filter(Boolean).join(' ')
}

export function TopNav() {
  return (
    <header className="topnav">
      <div className="topnav__inner">
        <nav className="topnav__nav" aria-label="Sommaire">
          <NavLink to="/" className={getNavLinkClassName} end>
            Accueil
          </NavLink>
          <NavLink to="/profil" className={getNavLinkClassName}>
            Profil
          </NavLink>
          <NavLink to="/formations" className={getNavLinkClassName}>
            Formations
          </NavLink>
          <NavLink to="/projets" className={getNavLinkClassName}>
            Projets
          </NavLink>
          <ul className="topnav__social" aria-label="Liens sociaux">
            {SITE_SOCIAL.map(({ label, href, Icon }) => (
              <li key={label}>
                <a
                  className="topnav__social-link"
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                >
                  {createElement(Icon, {
                    'aria-hidden': true,
                    className: 'topnav__social-icon',
                  })}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </header>
  )
}

