"use client";
import TokenTable from "../../components/TokenTable";
import { useTheme } from "../../context/ThemeContext";

export default function MissedTokensPage() {
  const { darkMode } = useTheme();

  // Handle theme loading state (consistent with dashboard)
  if (darkMode === undefined) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
        <div className="text-center">
          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
            darkMode === true ? 'border-gray-100' : 'border-gray-900'
          }`}></div>
          <p className={`mt-4 text-lg font-semibold ${
            darkMode === true ? 'text-gray-100' : 'text-gray-900'
          }`}>
            Loading...
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen p-6 transition-colors duration-300 ${
      darkMode ? 'dark bg-gray-900' : 'bg-white'
    }`}>
      <div className="max-w-7xl mx-auto">
        <h1 className={`text-2xl font-bold mb-4 ${
          darkMode ? 'text-gray-100' : 'text-gray-800'
        }`}>
          Missed Tokens
        </h1>
        <TokenTable statusFilter="missed" />
      </div>
    </div>
  );
}