// @ts-nocheck
import { useState, useEffect } from 'react'
import styled from 'styled-components'
import clsx from 'clsx'

import Nav from './Nav'
import Logo from './Logo'

export default function Header () {
  const [scrollY, setScrollY] = useState(0)

  const handleScroll = () => {
    const offset = window.scrollY

    setScrollY(offset)
  }

  useEffect(() => {
    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <Wrapper className={clsx({ active: scrollY > 10 })}>
      <Logo active={scrollY > 10} />
      <Nav />
    </Wrapper>
  )
}

const Wrapper = styled.div`
    display: flex;
    align-items: center;
    height: 8.125rem;
    max-height: 8.125rem;
    padding: 1.875rem 5rem;
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    color: #fff;

    &.active {
      background-color: #fff;
      box-shadow: 0 6px 9px 0 rgba(0, 0, 0, .16);
      color: #0072CE;
      padding: .5rem 5rem;
      max-height: 5.5rem;
      transition: background-color 1s, box-shadow .2s, max-height .2s;
    }
`