import { useNavigate } from 'react-router-dom'
import { clearAuth, getRole } from '../lib/storage.js'

export default function Topbar() {
  const navigate = useNavigate()

  const role = getRole() || 'Admin'

  function logout() {
    clearAuth()
    navigate('/login')
  }

  return (
    <header className="p-6">

      <div className="bg-white rounded-3xl p-5 shadow flex items-center">

        <div className="flex-1">

          <input
            placeholder="Cari data..."
            className="border rounded-xl px-4 py-2 w-full max-w-md"
          />

        </div>

        <div className="flex items-center gap-4">

          <div>
            <div className="font-bold">
              Johanes
            </div>

            <div className="text-sm text-slate-500">
              {role}
            </div>
          </div>

          <button
            onClick={logout}
            className="px-4 py-2 rounded-xl border hover:bg-slate-100"
          >
            Keluar
          </button>

        </div>

      </div>

    </header>
  )
}