'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { BarChart3 } from 'lucide-react';

export function ResourceUsageTile() {
  // Mock data - in production, this would come from API
  const usageByDivision = [
    { name: 'Core Infrastructure', usage: 45, cost: 20350 },
    { name: 'Data Services', usage: 28, cost: 12600 },
    { name: 'Security', usage: 15, cost: 6750 },
    { name: 'AI/ML', usage: 12, cost: 5530 },
  ];

  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <CardTitle className="text-white flex items-center gap-2">
          <BarChart3 className="h-5 w-5 text-orange-500" />
          Resource Usage by Division
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {usageByDivision.map((division) => (
            <div key={division.name} className="p-3 bg-gray-900 rounded-lg">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm text-gray-300">{division.name}</span>
                <span className="text-sm font-semibold text-white">{division.usage}%</span>
              </div>
              <div className="w-full bg-gray-800 rounded-full h-2 mb-1">
                <div 
                  className="bg-orange-500 h-2 rounded-full"
                  style={{ width: `${division.usage}%` }}
                />
              </div>
              <p className="text-xs text-gray-400">${division.cost.toLocaleString()}/month</p>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

