import { useNavigate } from 'react-router-dom'
import { LogOut, User } from 'lucide-react'

export default function Header() {
  const navigate = useNavigate()
  const user   = localStorage.getItem('esn_user')   || 'admin'
  const role   = localStorage.getItem('esn_role')   || 'ADMIN'
  const tenant = localStorage.getItem('esn_tenant') || 'ALL'

  function handleLogout() {
    localStorage.removeItem('esn_token')
    localStorage.removeItem('esn_role')
    localStorage.removeItem('esn_user')
    localStorage.removeItem('esn_tenant')
    navigate('/login')
  }

  return (
    <header className="h-14 bg-panel border-b border-edge flex items-center px-6 gap-4 flex-shrink-0">
      <div className="flex-1" />
      <span className="text-xs text-gray-400">테넌트: <span className="text-brand">{tenant}</span></span>
      <span className="text-xs text-gray-400">|</span>
      <div className="flex items-center gap-2 text-sm text-gray-300">
        <User size={14} />
        <span>{user}</span>
        <span className="text-xs text-brand bg-brand/10 px-2 py-0.5 rounded">{role}</span>
      </div>
      <button onClick={handleLogout} className="flex items-center gap-1.5 text-gray-400 hover:text-white text-sm">
        <LogOut size={14} />
        로그아웃
      </button>
    </header>
  )
}