// src/components/InteractionLog.js
import React from "react";

const InteractionLog = ({ logs }) => {
  return (
    <div className="h-full overflow-y-auto p-4 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-inner">
      <div className="space-y-3">
        {logs.length > 0 ? (
          logs.map((log, index) => (
            <div
              key={index}
              className={`p-3 rounded-md transition-colors duration-200 ${
                log.type === "ai"
                  ? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100"
                  : log.type === "user"
                  ? "bg-green-100 dark:bg-green-900 text-green-900 dark:text-green-100"
                  : log.type === "remote"
                  ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100"
                  : log.type === "local"
                  ? "bg-purple-100 dark:bg-purple-900 text-purple-900 dark:text-purple-100"
                  : "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
              }`}
            >
              <p className="font-semibold text-sm">
                {log.type.charAt(0).toUpperCase() + log.type.slice(1)}:
              </p>
              <pre className="mt-1 whitespace-pre-wrap text-sm font-mono">
                {log.message}
              </pre>
            </div>
          ))
        ) : (
          <p className="text-gray-500 dark:text-gray-400 text-center py-10">
            No interactions yet.
          </p>
        )}
      </div>
    </div>
  );
};

export default InteractionLog;