import React from 'react';
import { ProctorStreamPanels } from './ProctorStreamPanels';

interface LiveProctorModalProps {
  studentId: number;
  studentName: string;
  studentCode: string;
  onClose: () => void;
}

export const LiveProctorModal: React.FC<LiveProctorModalProps> = ({
  studentId,
  studentName,
  studentCode,
  onClose,
}) => {
  return (
    <div className="modal-overlay" style={{ zIndex: 1100 }}>
      <div className="modal-container proctor-container">
        <div className="modal-header">
          <div>
            <h2 className="modal-title">Giám sát trực tiếp</h2>
            <p style={{ margin: '4px 0 0 0', color: 'var(--text-muted)', fontSize: '0.85rem' }}>
              Sinh viên: <strong style={{ color: 'var(--text-primary)' }}>{studentName}</strong> ({studentCode})
            </p>
          </div>
          <button className="btn btn-secondary" onClick={onClose}>Đóng</button>
        </div>
        <div className="proctor-content">
          <ProctorStreamPanels studentId={studentId} />
        </div>
      </div>
    </div>
  );
};
