"use client"

import { DashboardSidebar } from "@/components/dashboard-sidebar"
import { DashboardHeader } from "@/components/dashboard-header"
import { ApiAutomationCard } from "@/components/api-automation-card"
import { GlossaryContextCard } from "@/components/glossary-context-card"

export default function DashboardPage() {
  return (
    <div className="flex h-screen bg-background">
      {/* Sidebar */}
      <DashboardSidebar />

      {/* Main area */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* Top Header */}
        <DashboardHeader />

        {/* Content */}
        <main className="flex-1 overflow-y-auto">
          <div className="mx-auto max-w-5xl px-4 py-6 lg:px-8 lg:py-8">
            {/* Page heading */}
            <div className="mb-6">
              <h2 className="text-xl font-semibold tracking-tight text-foreground">
                Overview
              </h2>
              <p className="mt-1 text-sm text-muted-foreground">
                Monitor your usage, manage API keys, and configure translation
                preferences.
              </p>
            </div>

            {/* Feature cards */}
            <div className="flex flex-col gap-6">
              <ApiAutomationCard />
              <GlossaryContextCard />
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}