import React from 'react';
import { useTranslation } from 'react-i18next';

const FoundMalwaresList = ({ files, formatDateTime }) => {
  const { t } = useTranslation();
  
  if (!files || files.length === 0) {
    return (
      <div className="py-3 text-sm text-gray-500 dark:text-gray-400">{t('scanner.noMalwareFound')}</div>
    );
  }

  return (
    <div className="flex flex-col gap-3 h-full">
      {files.slice(0, 5).map((f, i) => {
        const fullPath = (f.dir_path ? f.dir_path + '/' : '/') + (f.file_name || '');
        const isMalicious = Number(f.scan_result) === 2;
        
        return (
          <div key={i} className="flex-1 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 flex flex-col justify-between">
            <div className="flex items-start justify-between mb-2">
              <div className="flex-1 min-w-0">
                <div className="text-xs font-medium text-gray-900 dark:text-gray-100 truncate" title={fullPath}>
                  {fullPath.length > 40 ? fullPath.substring(0, 37) + '...' : fullPath}
                </div>
              </div>
              <span className={`ml-2 px-2 py-0.5 text-xs font-medium rounded shrink-0 ${
                isMalicious
                  ? 'bg-red-600 text-white'
                  : 'bg-amber-600 text-white'
              }`}>
                {isMalicious ? t('scanner.malicious') : t('scanner.injected')}
              </span>
            </div>
            <div className="text-xs text-gray-600 dark:text-gray-400">
              <span className="font-medium">{t('scanner.detected')}</span> {formatDateTime(f.created_at)}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default FoundMalwaresList;