import React from 'react';
import { useQuery } from 'react-query';
import api from '../../services/api';

export const TaxaSucessoCard: React.FC = () => {
  const { data: stats } = useQuery('taxa-sucesso', async () => {
    const response = await api.get('/dashboard/processos/taxa-sucesso');
    return response.data;
  });

  if (!stats) return null;

  const estatisticas = stats || [];
  const total = estatisticas.reduce((acc: number, curr: any) => acc + (curr._count || 0), 0);
  
  return (
    <div className="bg-white rounded-lg shadow p-6">
      <h3 className="text-lg font-semibold mb-4">Taxa de Sucesso</h3>
      <div className="flex items-center justify-between">
        <div className="text-3xl font-bold text-green-600">
          {estatisticas.find((s: any) => s.resultado === 'PROCEDENTE')?._count
            ? Math.round((estatisticas.find((s: any) => s.resultado === 'PROCEDENTE')._count / total) * 100)
            : 0}%
        </div>
        <div className="text-sm text-gray-500">
          Total julgados: {total}
        </div>
      </div>
      <div className="mt-4 space-y-2">
        {estatisticas.map((item: any) => (
          <div key={item.resultado} className="flex justify-between">
            <span className="text-sm text-gray-600">{item.resultado}</span>
            <span className="text-sm font-medium">{Math.round((item._count / total) * 100)}%</span>
          </div>
        ))}
      </div>
    </div>
  );
};