'use client';

import { TrendingUp } from 'lucide-react';

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

export function ServiceAdoptionTile() {
  // Mock data - in production, this would come from API
  const services = [
    { name: 'PhoenixCore Compute', adoption: 95, trend: 'up' },
    { name: 'OkraVault Storage', adoption: 87, trend: 'up' },
    { name: 'SankofaGrid Network', adoption: 72, trend: 'up' },
    { name: 'Firebird AI Engine', adoption: 45, trend: 'up' },
  ];

  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <CardTitle className="text-white flex items-center gap-2">
          <TrendingUp className="h-5 w-5 text-orange-500" />
          Service Adoption Metrics
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {services.map((service) => (
            <div key={service.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">{service.name}</span>
                <span className="text-sm font-semibold text-white">{service.adoption}%</span>
              </div>
              <div className="w-full bg-gray-800 rounded-full h-2">
                <div 
                  className="bg-green-500 h-2 rounded-full"
                  style={{ width: `${service.adoption}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

