import useCommandLogStore from "../../stores/useCommandLogStore";

const CommandLogPopup = () => {
  const { logs, visible, hide } = useCommandLogStore();

  if (!visible || logs.length === 0) {
    return null;
  }

  // Afficher les 5 derniers logs (les plus récents en premier)
  const displayLogs = logs.slice(0, 5);

  const getTypeIcon = (type) => {
    switch (type) {
      case "success":
        return "fa-check-circle";
      case "error":
        return "fa-times-circle";
      case "warning":
        return "fa-exclamation-triangle";
      default:
        return "fa-info-circle";
    }
  };

  return (
    <div className="command-log-popup">
      <div className="command-log-header">
        <span className="command-log-title">
          <i className="fa-solid fa-terminal"></i> Logs
        </span>
        <button className="command-log-close" onClick={hide} title="Fermer">
          <i className="fa-solid fa-times"></i>
        </button>
      </div>
      <div className="command-log-content">
        {displayLogs.map((log) => (
          <div key={log.id} className={`command-log-line ${log.type}`}>
            <span className="log-timestamp">{log.timestamp}</span>
            <i className={`fa-solid ${getTypeIcon(log.type)} log-icon`}></i>
            <span className="log-message">{log.message}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default CommandLogPopup;
