components/Results.jsx

import { FiUser, FiBriefcase, FiMapPin, FiAlertCircle, FiBarChart2, FiFileText } from 'react-icons/fi';

export default function Results({ data, loading, error }) {
  if (loading) {
    return (
      <div className="text-center py-8">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
        <p className="text-gray-600">Carregando dados e gerando análise...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border-l-4 border-red-500 p-4 rounded-md">
        <div className="flex">
          <div className="flex-shrink-0">
            <FiAlertCircle className="h-5 w-5 text-red-500" />
          </div>
          <div className="ml-3">
            <p className="text-red-700">{error}</p>
          </div>
        </div>
      </div>
    );
  }

  if (!data || data.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500">
        <FiAlertCircle className="mx-auto h-12 w-12 mb-4" />
        <p>Nenhum resultado encontrado</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {data.map((agent, index) => (
        <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div className="p-6">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between">
              <div className="flex items-center space-x-4 mb-4 md:mb-0">
                <div className="bg-primary text-white rounded-full h-12 w-12 flex items-center justify-center font-bold text-xl">
                  {agent.name.charAt(0)}
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 flex items-center">
                    <FiUser className="mr-2" /> {agent.name}
                  </h3>
                  <p className="text-gray-600 flex items-center">
                    <FiBriefcase className="mr-2" /> {agent.position}
                  </p>
                </div>
              </div>
              <div className="text-right">
                <p className="text-gray-600 flex items-center justify-end md:justify-start">
                  <FiMapPin className="mr-2" /> {agent.location}
                </p>
                <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${agent.status === 'ativo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                  {agent.status}
                </span>
              </div>
            </div>

            {agent.details && (
              <div className="mt-4 pt-4 border-t border-gray-200">
                <p className="text-gray-700">{agent.details}</p>
              </div>
            )}

            {agent.analysis && (
              <div className="mt-4 pt-4 border-t border-gray-200">
                <h4 className="font-medium text-gray-900 mb-2 flex items-center">
                  <FiBarChart2 className="mr-2" /> Análise Forense
                </h4>
                <p className="text-gray-700">{agent.analysis}</p>
              </div>
            )}

            {agent.recommendations && (
              <div className="mt-4 pt-4 border-t border-gray-200">
                <h4 className="font-medium text-gray-900 mb-2 flex items-center">
                  <FiFileText className="mr-2" /> Recomendações
                </h4>
                <ul className="list-disc list-inside text-gray-700 space-y-1">
                  {agent.recommendations.map((rec, i) => (
                    <li key={i}>{rec}</li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}