app/page.tsx

import { GET as getHealth } from '@/app/api/v1/health/route';
import { Hamburger } from '@/app/components/Hamburger';
import { SystemStatus } from '@/app/components/SystemStatus';


export const dynamic = 'force-dynamic'; // Ensure it doesn't cache statically forever

export default async function Home() {
  const response = await getHealth();
  const data = await response.json();

  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black p-4 sm:p-8">
      <main className="flex flex-col items-start gap-4 p-4 sm:p-8 bg-white dark:bg-zinc-900 shadow-xl rounded-lg border border-zinc-200 dark:border-zinc-800 w-full max-w-2xl">
        <div className="flex justify-between w-full items-center">
          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
            Munger Engine
          </h1>
          <div className="flex items-center gap-2">
            <Hamburger />
          </div>
        </div>
        <div className="text-sm text-zinc-500 dark:text-zinc-400">
          System Status
        </div>

        <SystemStatus initialData={data} />

        <div className="mt-4 text-xs text-zinc-400">
          <span className="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span>
          API Operational
        </div>
      </main>
    </div>
  );
}