import { useNavigate } from 'react-router-dom'
import { Icon } from '../lib/icons'

export default function Header() {
  const navigate = useNavigate()
  const user   = localStorage.getItem('sgn_user')   || 'admin'
  const role   = localStorage.getItem('sgn_role')   || 'ADMIN'
  const tenant = localStorage.getItem('sgn_tenant') || 'ALL'

  function handleLogout() {
    ['sgn_token', 'sgn_role', 'sgn_user', 'sgn_tenant'].forEach(k => localStorage.removeItem(k))
    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-500">|</span>
      <div className="flex items-center gap-2 text-sm text-gray-300">
        <Icon name="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">
        <Icon name="logout" size={14} /> 로그아웃
      </button>
    </header>
  )
}
