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 AtividadesRecentes: React.FC = () => {
  const { data: atividades = [] } = useQuery('atividades', async () => {
    const response = await api.get('/dashboard/atividades');
    return response.data;
  });

  const formatData = (data: string | Date | null) => {
    if (!data) return '';
    try {
      return format(new Date(data), "dd 'de' MMMM 'às' HH:mm", { locale: ptBR });
    } catch (error) {
      console.error('Erro ao formatar data:', error);
      return 'Data inválida';
    }
  };

  return (
    <div className="p-6">
      <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
        Atividades Recentes
      </h2>
      <div className="space-y-4">
        {atividades.map((atividade: any) => (
          <div key={atividade.id} className="flex items-start space-x-3">
            <span className="text-2xl">{atividade.tipo === 'PROCESSO' ? '⚖️' : '📋'}</span>
            <div className="flex-1">
              <p className="text-sm text-gray-900 dark:text-white">
                {atividade.descricao}
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                {formatData(atividade.data)}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};