import React from 'react';
import { useQuery } from 'react-query';
import { format } from 'date-fns';
import { ptBR } from 'date-fns/locale';
import api from '../../../services/api';

export const MapaCalor: React.FC = () => {
  const { data: atividadesDiarias } = useQuery('atividadesDiarias', async () => {
    const response = await api.get('/dashboard/atividades/diarias');
    return response.data;
  });

  const intensidadeCor = (quantidade: number) => {
    if (quantidade === 0) return 'bg-gray-100 dark:bg-gray-800';
    if (quantidade <= 3) return 'bg-blue-100 dark:bg-blue-900';
    if (quantidade <= 6) return 'bg-blue-300 dark:bg-blue-700';
    return 'bg-blue-500 dark:bg-blue-500';
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
        Mapa de Atividades
      </h2>
      <div className="grid grid-cols-7 gap-2">
        {atividadesDiarias?.map((dia: any) => (
          <div
            key={dia.data}
            className={`aspect-square rounded-sm ${intensidadeCor(dia.quantidade)}`}
            title={`${format(new Date(dia.data), "dd 'de' MMMM", { locale: ptBR })}: ${dia.quantidade} atividades`}
          />
        ))}
      </div>
    </div>
  );
};