import React from "react";

interface DeploymentLogProps {
  log: string;
}

const DeploymentLog: React.FC<DeploymentLogProps> = ({ log }) => {
  if (!log) return null;

  return (
    <div className="rounded-2xl border border-gray-200 bg-white px-5 pb-5 pt-5 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6">
      <div className="flex flex-col gap-5 mb-6 sm:flex-row sm:justify-between">
        <div className="w-full">
          <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
            Log
          </h3>
        </div>
      </div>
      <div className="max-w-full overflow-x-auto custom-scrollbar">
        <pre className="bg-gray-800 text-green-300 p-4 rounded whitespace-pre-wrap">
          {log}
        </pre>
      </div>
    </div>
  );
};

export default DeploymentLog;
