import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { PATH } from '../../../utility/constants/path';
import cocoLogo from '../../../assets/logo.svg';
import { sendEventViewItem } from '../../../utility/analytics/events';

import './index.scss';

export default function Header() {
  const location = useLocation();
  // Analytics
  function send(params) {
    sendEventViewItem(params, location);
  }

  return (
    <ul className="header-menu">
      <li className="header-menu--item logo">
        <Link to={`${PATH.HOME}`} onClick={() => send({ to: `${PATH.HOME}`, category: 'logo' })}>
          <div className="go-home">
            <svg className="icon coco-logo" fill="none" stroke="currentColor">
              <use href="#coco-logo"></use>
            </svg>
          </div>
        </Link>
      </li>
      <li className="header-menu--item home">
        <Link to={`${PATH.HOME}`} onClick={() => send({ to: `${PATH.HOME}`, category: 'link' })}>
          Home
        </Link>
      </li>
      <li className="header-menu--item comedians">
        <Link to={`${PATH.COMEDIANS}`} onClick={() => send({ to: `${PATH.COMEDIANS}` })}>
          Comedians
        </Link>
      </li>
      <li className="header-menu--item search">
        <Link to={`${PATH.SEARCH}`} onClick={() => send({ to: `${PATH.SEARCH}` })}>
          Search
        </Link>
      </li>
    </ul>
  );
}