components/DataFetcher.js

import { useState } from 'react';

export default function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch('/api/status');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-gray-50 dark:bg-gray-900 p-6 rounded-xl border border-gray-200 dark:border-gray-700">
      <h3 className="text-xl font-semibold mb-4 text-gray-800 dark:text-white flex items-center gap-2">
        API Interaction Demo
      </h3>
      
      <button 
        onClick={fetchData}
        disabled={loading}
        className="w-full sm:w-auto bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-medium py-2 px-6 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {loading ? 'Loading...' : 'Check System Status'}
      </button>

      {error && (
        <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg">
          Error: {error}
        </div>
      )}

      {data && !loading && (
        <div className="mt-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
          <h4 className="font-bold text-green-600 dark:text-green-400 mb-2">Response Received:</h4>
          <div className="space-y-2 text-sm font-mono text-gray-700 dark:text-gray-300">
            <p><span className="font-bold">Status:</span> {data.status}</p>
            <p><span className="font-bold">Message:</span> {data.message}</p>
            <p><span className="font-bold">Timestamp:</span> {data.timestamp}</p>
            <p><span className="font-bold">Uptime:</span> {Math.floor(data.uptime)}s</p>
          </div>
        </div>
      )}
    </div>
  );
}