'use client'
import React, { useEffect, useState } from 'react'
import { cn } from '@/lib/utils'
import Image from 'next/image'
import Link from 'next/link'

function TopbarWithoutLogin() {
  const [isBlur, setIsBlur] = useState(false)

  useEffect(() => {
    function handleScroll(event: Event) {
      const dom = event.target as HTMLElement
      setIsBlur(dom.scrollTop > 0)
    }
    const dom = document.getElementById('main-content')
    if (dom) {
      dom.addEventListener('scroll', handleScroll, { passive: true })
    }
    return () => {
      if (dom) {
        dom.removeEventListener('scroll', handleScroll)
      }
    }
  }, [])

  return (
    <header
      className={cn(
        'fixed top-0 right-0 left-0 z-40 flex h-16 items-center justify-between px-8 transition-all',
        {
          'backdrop-blur-[10px]': isBlur,
        }
      )}
    >
      {isBlur && <div className="bg-background-default absolute inset-0 opacity-85" />}
      <div className="relative inset-0 flex w-full items-center justify-between">
        <div className="h-8 w-[103.6px]">
          <Link href="/">
            <Image src="/logo.svg" alt="Logo" width={103.6} height={32} />
          </Link>
        </div>
        <div />
      </div>
    </header>
  )
}

export default TopbarWithoutLogin
