import React from 'react'

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">
          <form action="/search" method="get" className="relative">
            <input name="q" aria-label="Search" placeholder="Search tags, artworks, artists…"
                   className="w-full bg-neutral-800 border border-neutral-700 rounded-lg py-2.5 pl-3.5 pr-10 text-white outline-none focus:border-sky-400" />
            <i className="fas fa-search absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400" aria-hidden="true"></i>
          </form>
        </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>
  )
}