/**
 * AdminHeader 컴포넌트
 * 모든 Admin 페이지에서 공통으로 사용하는 헤더
 * 로고, Admin 배지, 사용자 정보, 로그아웃 버튼 포함
 */
import { Link, useNavigate } from 'react-router-dom';
import { LogOut } from 'lucide-react';
import { useAuthStore } from '@/stores';

function AdminHeader({ user }) {
  const navigate = useNavigate();
  const logout = useAuthStore((state) => state.logout);

  const handleLogout = () => {
    logout();
    navigate('/admin', { replace: true });
  };

  return (
    <header className="bg-white shadow-sm border-b border-gray-100">
      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link
            to="/admin/dashboard"
            className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity"
          >
            fromis_9
          </Link>
          <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
            Admin
          </span>
        </div>
        <div className="flex items-center gap-4">
          <span className="text-gray-500 text-sm">
            안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
          </span>
          <button
            onClick={handleLogout}
            className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <LogOut size={18} />
            <span>로그아웃</span>
          </button>
        </div>
      </div>
    </header>
  );
}

export default AdminHeader;
