/**
 * JTZL_WebIRC_Chat - Debug Panel Component
 *
 * @package   JTZL_WebIRC_Chat
 * @copyright Copyright (c) 2025, JT. G.
 * @license   GPL-3.0+
 * @since     3.0.0
 */

import { memo } from 'react';
import { ScrollArea } from '../ui/scroll-area';

interface DebugPanelProps {
	logs: string[];
	className?: string;
}

/**
 * Debug panel component for displaying raw IRC logs.
 * Only loaded when debug mode is enabled.
 *
 * @since 3.0.0
 */
export const DebugPanel = memo(({ logs, className }: DebugPanelProps) => {
	return (
		<div
			className={`bg-card border border-border rounded-lg ${className || ''}`}
		>
			<div className="p-3 border-b border-border">
				<h3 className="text-sm font-semibold text-card-foreground">
					Debug Log
				</h3>
			</div>
			<ScrollArea className="h-48">
				<div className="p-3 space-y-1">
					{logs.map((log, index) => (
						<div
							key={index}
							className="text-xs font-mono text-muted-foreground"
						>
							{log}
						</div>
					))}
				</div>
			</ScrollArea>
		</div>
	);
});

DebugPanel.displayName = 'DebugPanel';