"use client";

import { useState, Suspense } from "react";
import { UsageStats, RequestLogger } from "@/shared/components";

export default function UsagePage() {
  const [activeTab, setActiveTab] = useState("overview");

  return (
    <div className="flex flex-col gap-6">
      {/* Tabs */}
      <div className="flex border-b border-border">
        <button
          onClick={() => setActiveTab("overview")}
          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
            activeTab === "overview"
              ? "border-primary text-primary"
              : "border-transparent text-text-muted hover:text-text-primary"
          }`}
        >
          Overview
        </button>
        <button
          onClick={() => setActiveTab("logs")}
          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
            activeTab === "logs"
              ? "border-primary text-primary"
              : "border-transparent text-text-muted hover:text-text-primary"
          }`}
        >
          Logger
        </button>
      </div>

      {/* Content */}
      <Suspense fallback={<div className="text-text-muted">Loading...</div>}>
        {activeTab === "overview" ? <UsageStats /> : <RequestLogger />}
      </Suspense>
    </div>
  );
}