import React from 'react';
import { SystemCheck } from '../components/SystemCheck';
import { Link } from 'react-router-dom';

export const AdminPage: React.FC = () => {
    // This state is just for the SystemCheck component and doesn't affect the main app's readiness.
    const [isReady, setIsReady] = React.useState(false);

    return (
        <div className="max-w-screen-md mx-auto py-8 px-4">
            <div className="mb-8">
                <Link to="/" className="text-brand-primary hover:underline">&larr; Back to Main App</Link>
                <h1 className="text-3xl font-bold text-gray-800 dark:text-white mt-2">Admin Dashboard</h1>
                <p className="text-gray-500 dark:text-gray-400">Tools and system health checks.</p>
            </div>
            <div className="space-y-8">
                <SystemCheck onReady={() => setIsReady(true)} />
            </div>
        </div>
    );
};