import React from "react";
import { useQuery } from "react-query";

import api from "../../../services/api";
import { Card } from "../Card";

export const AtendimentosStats: React.FC = () => {
  const { data: stats } = useQuery("atendimentosStats", async () => {
    const response = await api.get("/dashboard/atendimentos/stats");
    return response.data;
  });

  return (
    <div className="grid gap-4">
      <Card
        title="Atendimentos Hoje"
        value={stats?.hoje || 0}
        icon="Calendar"
        color="blue"
      />
      <Card
        title="Próximos 7 dias"
        value={stats?.proximaSemana || 0}
        icon="CalendarDays"
        color="purple"
      />
      <Card
        title="Total no Mês"
        value={stats?.totalMes || 0}
        trend={stats?.crescimentoMes}
        icon="ChartBar"
        color="green"
      />
    </div>
  );
};