import { useAuth, useAuthModal } from '../auth'

export default function ProfileBar() {
  const { user, loading, logout } = useAuth()
  const { openAuthModal } = useAuthModal()

  return (
    <>
      <div className="profile-bar">
        {loading ? (
          <span className="profile-loading">Загрузка…</span>
        ) : user ? (
          <div className="profile-user">
            {user.avatar_url ? (
              <img src={user.avatar_url} alt={user.nickname} className="profile-avatar" />
            ) : (
              <div className="profile-avatar profile-avatar-placeholder">
                {user.nickname[0]?.toUpperCase()}
              </div>
            )}
            <span className="profile-name">{user.nickname}</span>
            <button className="link-button" onClick={logout}>
              Выйти
            </button>
          </div>
        ) : (
          <button className="btn btn-primary" onClick={openAuthModal}>
            Войти
          </button>
        )}
      </div>
    </>
  )
}