import { useEffect } from 'react';
import { useFile } from '../hooks/useFile';
interface FileModalProps {
path: string | null;
onClose: () => void;
}
export function FileModal({ path, onClose }: FileModalProps) {
const { data, loading, error, loadFile, reset } = useFile();
useEffect(() => {
if (path) {
loadFile(path);
} else {
reset();
}
}, [path, loadFile, reset]);
const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
onClose();
}
};
if (!path) return null;
return (
<div className="modal active" onClick={handleBackdropClick}>
<div className="modal-content" style={{ maxWidth: 900, maxHeight: '80vh', overflow: 'auto' }}>
<div className="modal-header">
<div className="modal-title">{path}</div>
<button className="modal-close" onClick={onClose}>
×
</button>
</div>
{loading && <div className="loading">Loading...</div>}
{error && <div className="error">Error: {error}</div>}
{data && (
<pre
style={{
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '0.9rem',
lineHeight: 1.6,
color: '#ccc',
}}
>
{data.content}
</pre>
)}
</div>
</div>
);
}
