import React from 'react';

import proximity_logo from '../assets/images/proximity_logo.svg';
import backgroundVideo from '../assets/videos/video.mp4';

export default function HeaderD({
  currentLanguage,
  setCurrentLanguage,
  showCookies,
  setShowCookies,
}) {
  const headerLinkClasses =
    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg mx-4';

  const cookies = (
    <div className="w-full h-20 bg-indigo-1000 flex items-center justify-center z-10 fixed bottom-0">
      <div className="text-gray-100 font-avenirbook font-normal">
        This website uses cookies to improve your experience. We'll assume
        you're ok with this, but you can opt out if you wish.
      </div>

      <button
        className="h-3/5 flex items-center justify-center rounded px-6 text-lg font-bold bg-gray-100 text-indigo-1000 mx-4 hover:opacity-75 focus:opacity-75"
        onClick={() => setShowCookies(false)}
      >
        Accept
      </button>

      <a
        className="text-gray-200 border-b border-red-1000 hover:text-white focus:text-white"
        href="/"
      >
        Read more
      </a>
    </div>
  );

  return (
    <div className="h-screen w-full">
      <div className="absolute z-20 h-16 w-full flex items-center justify-between mt-8 px-20">
        <img
          src={proximity_logo}
          alt="Proximity Logo"
          className="h-full object-scale-down"
        />

        <div className="h-full flex items-center justify-end">
          <a className={headerLinkClasses} href="/">
            About
          </a>
          <a className={headerLinkClasses} href="/">
            Work
          </a>
          <a className={headerLinkClasses} href="/">
            Latest
          </a>
          <a className={headerLinkClasses} href="/">
            People & Careers
          </a>
          <a className={headerLinkClasses} href="/">
            Contact
          </a>

          <div className="border h-2/3 px-2 flex justify-between items-center">
            <button
              className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
                currentLanguage === 'en' ? 'font-bold' : ''
              }`}
              onClick={() => setCurrentLanguage('en')}
            >
              EN
            </button>
            <button
              className={`uppercase font-avenirbook text-lg text-gray-200 ml-1 ${
                currentLanguage === 'fr' ? 'font-bold' : ''
              }`}
              onClick={() => setCurrentLanguage('fr')}
            >
              FR
            </button>
          </div>
        </div>
      </div>

      <div className="absolute z-10 w-full h-full flex items-center justify-center">
        <p className="w-2/5 font-avenirblack text-center text-5xl font-bold text-gray-200">
          We make people
          <br />
          more valuable to brands
        </p>
      </div>

      <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
        <a
          href="#part-one"
          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
        >
          {' '}
        </a>
      </div>

      {showCookies && cookies}

      <video
        className="h-full w-full bg-gray-900 z-0 object-cover absolute"
        autoPlay
        loop
        muted
      >
        <source src={backgroundVideo} type="video/mp4" />
      </video>
    </div>
  );
}
