'use client';

import { Activity, AlertCircle } from 'lucide-react';

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

export function APIUsageTile() {
  // Mock data - in production, this would come from API
  const usage = {
    requests: { current: 1250000, limit: 2000000, percentage: 62.5 },
    quota: { used: 62.5, remaining: 37.5 },
  };

  const isNearLimit = usage.quota.used > 80;

  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <CardTitle className="text-white flex items-center gap-2">
          <Activity className="h-5 w-5 text-orange-500" />
          API Usage & Quotas
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div>
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm text-gray-400">Requests (this month)</span>
              <span className="text-sm font-semibold text-white">
                {usage.requests.current.toLocaleString()} / {usage.requests.limit.toLocaleString()}
              </span>
            </div>
            <div className="w-full bg-gray-900 rounded-full h-3">
              <div 
                className={`h-3 rounded-full ${isNearLimit ? 'bg-red-500' : 'bg-orange-500'}`}
                style={{ width: `${usage.quota.used}%` }}
              />
            </div>
            <p className="text-xs text-gray-400 mt-1">
              {usage.quota.remaining}% remaining
            </p>
          </div>

          {isNearLimit && (
            <div className="p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
              <div className="flex items-center gap-2">
                <AlertCircle className="h-4 w-4 text-yellow-400" />
                <span className="text-sm text-yellow-400 font-semibold">
                  Approaching quota limit
                </span>
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

