'use client'

import MetricsCard from './MetricsCard'

export default function Dashboard() {
  return (
    <div className="space-y-6 p-6">
      <h1 className="text-3xl font-bold text-white">Dashboard</h1>
      
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        <MetricsCard
          title="Total Regions"
          value="325"
          health={95}
          trend="up"
          description="Active global regions"
        />
        <MetricsCard
          title="Active Services"
          value="1,247"
          health={88}
          trend="stable"
          description="Running services"
        />
        <MetricsCard
          title="Network Health"
          value="92%"
          health={92}
          trend="up"
          description="Overall network status"
        />
        <MetricsCard
          title="Cost Efficiency"
          value="87%"
          health={87}
          trend="up"
          description="Cost optimization score"
        />
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <div className="rounded-lg border border-studio-medium bg-studio-dark p-6">
          <h2 className="mb-4 text-xl font-semibold text-white">Performance Metrics</h2>
          <p className="text-gray-400">Chart placeholder - ECharts integration</p>
        </div>
        
        <div className="rounded-lg border border-studio-medium bg-studio-dark p-6">
          <h2 className="mb-4 text-xl font-semibold text-white">Cost Analysis</h2>
          <p className="text-gray-400">Chart placeholder - ECharts integration</p>
        </div>
      </div>
    </div>
  )
}