'use client';

import { BarChart3, TrendingUp, Users, DollarSign } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';

export function AdvancedAnalytics() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="bg-gray-800 border-gray-700">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-400">Total Revenue</p>
                <p className="text-2xl font-bold text-white">$125,430</p>
                <p className="text-xs text-green-400 mt-1">+12.5% from last month</p>
              </div>
              <DollarSign className="h-8 w-8 text-green-400" />
            </div>
          </CardContent>
        </Card>

        <Card className="bg-gray-800 border-gray-700">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-400">Active Users</p>
                <p className="text-2xl font-bold text-white">2,450</p>
                <p className="text-xs text-blue-400 mt-1">+8.2% from last month</p>
              </div>
              <Users className="h-8 w-8 text-blue-400" />
            </div>
          </CardContent>
        </Card>

        <Card className="bg-gray-800 border-gray-700">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-400">API Requests</p>
                <p className="text-2xl font-bold text-white">12.5M</p>
                <p className="text-xs text-purple-400 mt-1">+15.3% from last month</p>
              </div>
              <BarChart3 className="h-8 w-8 text-purple-400" />
            </div>
          </CardContent>
        </Card>

        <Card className="bg-gray-800 border-gray-700">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-400">Growth Rate</p>
                <p className="text-2xl font-bold text-white">18.7%</p>
                <p className="text-xs text-orange-400 mt-1">+2.1% from last month</p>
              </div>
              <TrendingUp className="h-8 w-8 text-orange-400" />
            </div>
          </CardContent>
        </Card>
      </div>

      <Card className="bg-gray-800 border-gray-700">
        <CardHeader>
          <CardTitle className="text-white">Analytics Dashboard</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="h-64 bg-gray-900 rounded flex items-center justify-center">
            <p className="text-gray-400">Advanced charts and visualizations would appear here</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

