import React from 'react'
import SearchBar from '../Search/SearchBar'

export default function Topbar() {
  return (
    <header className="fixed top-0 left-0 right-0 h-16 bg-neutral-900 border-b border-neutral-800 z-50">
      <div className="h-full px-5 flex items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <button aria-label="Toggle menu" className="md:hidden text-neutral-200 hover:text-sky-400">
            <i className="fas fa-bars text-lg" aria-hidden="true"></i>
          </button>
          <a href="/" className="text-sky-400 font-semibold text-xl">Skinbase</a>
        </div>

        <div className="hidden md:block flex-1 max-w-xl">
          <SearchBar />
        </div>

        <div className="flex items-center gap-4 sm:gap-5">
          <a href="/forum" className="hidden sm:inline text-sm hover:text-sky-400">Forum</a>
          <button aria-label="User menu" className="text-neutral-200 hover:text-sky-400">
            <i className="fas fa-user" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </header>
  )
}