import { Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import DownloadSection from '../components/DownloadSection';
import AnnouncementBoard from '../components/AnnouncementBoard';
import './HomePage.css';

export default function HomePage() {
  const { user, logout } = useAuth();

  return (
    <div className="home-page">
      <header className="home-header">
        <h1 className="home-logo">A301</h1>
        <div className="home-user">
          {user ? (
            <>
              <span className="home-username">{user.username}</span>
              {user.role === 'admin' && (
                <Link to="/admin" className="btn-admin-link">관리자</Link>
              )}
              <button className="btn-logout" onClick={logout}>로그아웃</button>
            </>
          ) : (
            <Link to="/login" className="btn-header-login">로그인</Link>
          )}
        </div>
      </header>

      <section className="hero-banner">
        <div className="hero-overlay">
          <h2 className="hero-title">A301 MULTIPLAYER</h2>
          <p className="hero-desc">Unity 3D 멀티플레이어 테스트에 참여하세요</p>
        </div>
      </section>

      <main className="home-main">
        <DownloadSection />
        <AnnouncementBoard />
      </main>
    </div>
  );
}