import { X, Edit } from 'lucide-react';

export default function FileViewerModal({ file, onClose, onEdit }) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-dark-800 rounded-lg w-full max-w-4xl h-[80vh] flex flex-col border border-gray-700">
        <div className="flex items-center justify-between p-4 border-b border-gray-700">
          <h2 className="text-xl font-bold text-white">{file.name}</h2>
          <div className="flex gap-2">
            <button
              onClick={onEdit}
              className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded flex items-center gap-2 text-white transition"
            >
              <Edit className="w-4 h-4" />
              Редактировать
            </button>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-white transition"
            >
              <X className="w-6 h-6" />
            </button>
          </div>
        </div>

        <div className="flex-1 overflow-auto p-4 bg-dark-900">
          <pre className="text-sm text-gray-100 font-mono whitespace-pre-wrap">
            {file.content}
          </pre>
        </div>
      </div>
    </div>
  );
}