import React from "react";
import { SyncLog } from "../../types";
import { X } from "lucide-react";

interface SyncLogsPanelProps {
  showLogs: boolean;
  syncLogs: SyncLog[];
  onClose?: () => void;
}

export default function SyncLogsPanel({
  showLogs,
  syncLogs,
  onClose
}: SyncLogsPanelProps) {
  
  if (!showLogs) return null;

  return (
    <div className="bg-[#15181E] border border-slate-800 rounded-xl p-4 space-y-3 shadow-md text-left">
      <div className="flex items-center justify-between">
        <span className="text-[10px] font-mono uppercase tracking-wider text-slate-500 block">Workspace Handshake Logs</span>
        {onClose && (
          <button
            onClick={onClose}
            className="p-0.5 text-slate-500 hover:text-white transition duration-150 cursor-pointer"
            title="Hide Logs"
          >
            <X className="h-3 w-3" />
          </button>
        )}
      </div>
      <div className="bg-[#0F1115]/60 p-2.5 border border-slate-800 rounded-lg max-h-[140px] overflow-y-auto space-y-2 pr-1 scrollbar-thin">
        {syncLogs.map((log) => (
          <div key={log.id} className="text-[10px] leading-relaxed font-mono">
            <span className="text-slate-600">[{log.timestamp.split("T")[1]?.slice(0, 8)}]</span>{" "}
            <span className={
              log.type === "success" ? "text-emerald-400" :
              log.type === "error" ? "text-red-400" :
              log.type === "sync" ? "text-blue-400" : "text-slate-400"
            }>
              {log.text}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}