import { Badge } from "@/components/ui/badge"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
import { getLevelColor } from "@/lib/log-helpers"
import type { SystemLog } from "@/types"

interface Props {
    log: SystemLog | null;
    onClose: () => void;
}

export function LogDetailModal({ log, onClose }: Props) {
    if (!log) {
return null;
}

    return (
        <Dialog open={!!log} onOpenChange={onClose}>
            <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col">
                <DialogHeader>
                    <div className="flex items-center gap-3">
                        <DialogTitle>Detail Log</DialogTitle>
                        <Badge variant={getLevelColor(log.level)}>{log.level}</Badge>
                        <span className="text-sm text-muted-foreground">{log.timestamp}</span>
                    </div>
                </DialogHeader>
                
                <div className="flex-1 overflow-y-auto mt-4 rounded-lg bg-muted/50 p-4 border">
                    <pre className="font-mono text-xs whitespace-pre-wrap break-all">
                        {log.message}
                    </pre>
                </div>
            </DialogContent>
        </Dialog>
    );
}