"use client";
import { useState, useEffect } from "react";
import { useSearchParams } from "next/navigation";
// ...other imports

export default function LeaderboardPage() {
  const [teams, setTeams] = useState([]);
  const [loading, setLoading] = useState(true);
  const searchParams = useSearchParams();
  const huntJustEnded = searchParams.get("huntEnded") === "true";

  // ...existing fetch logic

  return (
    <div className="leaderboard-page">
      <div className="page-header">
        <div className="back-button"></div>
        <div className="page-title">Leaderboard</div>
      </div>

      {huntJustEnded && (
        <div className="hunt-ended-alert">
          <div className="hunt-ended-icon">🎯</div>
          <h2>The Hunt Has Ended!</h2>
          <p>
            The timer has been stopped by an administrator. Here are the final
            results.
          </p>
        </div>
      )}

      {/* Rest of the leaderboard content */}
      {/* ...existing code */}

      <style jsx>{`
        /* ...existing styles */

        .hunt-ended-alert {
          background-color: #f8d7da;
          color: #721c24;
          border: 1px solid #f5c6cb;
          border-radius: 8px;
          padding: 15px;
          margin: 20px;
          text-align: center;
        }

        .hunt-ended-icon {
          font-size: 36px;
          margin-bottom: 10px;
        }
      `}</style>
    </div>
  );
}