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

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

  return (
    <div className="grid gap-4">
      <Card
        title="Honorários a Receber"
        value={formatCurrency(stats?.honorariosReceber || 0)}
        icon="BanknotesIcon"
        color="green"
      />
      <Card
        title="Custas do Mês"
        value={formatCurrency(stats?.custasMes || 0)}
        trend={stats?.variacaoCustas}
        icon="ReceiptPercentIcon"
        color="red"
      />
      <Card
        title="Receitas (Mês)"
        value={formatCurrency(stats?.receitasMes || 0)}
        trend={stats?.crescimentoReceitas}
        icon="CurrencyDollarIcon"
        color="blue"
      />
    </div>
  );
};