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

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

  return (
    <div className="grid gap-4">
      <Card
        title="Total de Processos"
        value={stats?.total || 0}
        trend={stats?.crescimento || 0}
        icon="DocumentText"
      />
      <Card
        title="Por Tribunal"
        items={stats?.porTribunal || []}
        type="list"
      />
      <Card
        title="Por Status"
        items={stats?.porStatus || []}
        type="list"
      />
    </div>
  );
};