'use client';
import { Globe, Monitor, Clock } from 'lucide-react';

export default function ClickLog({ logs }: { logs: any[] }) {
    return (
        <div className="bg-wtihub-surface rounded-2xl border border-wtihub-border overflow-hidden">
            <div className="p-6 border-b border-wtihub-border">
                <h3 className="text-sm font-bold text-gray-500 uppercase tracking-widest">Raw Intelligence Feed</h3>
            </div>
            
            <div className="max-h-96 overflow-y-auto custom-scrollbar">
                {logs.length === 0 ? (
                    <div className="p-12 text-center text-gray-600 text-sm italic">No interactions detected in the infrastructure.</div>
                ) : (
                    logs.map((log) => (
                        <div key={log._id} className="p-4 border-b border-wtihub-border/50 hover:bg-wtihub-bg/40 transition-colors flex items-center justify-between">
                            <div className="flex items-center gap-4">
                                <div className="bg-wtihub-green/10 p-2 rounded-lg text-wtihub-green">
                                    <Globe size={18} />
                                </div>
                                <div>
                                    <p className="text-wtihub-text text-sm font-medium">{log.wtihub_country} — <span className="text-gray-500">{log.wtihub_city}</span></p>
                                    <div className="flex items-center gap-2 text-[10px] text-gray-500 uppercase mt-1">
                                        <Monitor size={10} /> {log.wtihub_browser} on {log.wtihub_os}
                                    </div>
                                </div>
                            </div>
                            
                            <div className="text-right">
                                <div className="flex items-center gap-1 text-gray-400 text-xs justify-end">
                                    <Clock size={12} />
                                    {new Date(log.wtihub_timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                </div>
                                <p className="text-[10px] text-gray-600 mt-1">{new Date(log.wtihub_timestamp).toLocaleDateString()}</p>
                            </div>
                        </div>
                    ))
                )}
            </div>
        </div>
    );
}