import React, { useEffect } from 'react';
import VideoDetailContent from './VideoDetailContent';

interface VideoDetailModalProps {
  videoId: string;
  onClose: () => void;
}

const VideoDetailModal: React.FC<VideoDetailModalProps> = ({ videoId, onClose }) => {
  useEffect(() => {
    // 모달 열릴 때 배경 스크롤 잠금
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.body.style.overflow = prev;
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [onClose]);

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(0, 0, 0, 0.85)',
        zIndex: 2000,
        display: 'flex',
        overflowY: 'auto',
        padding: '24px 16px',
      }}
      onClick={onClose}
    >
      <div
        style={{
          background: '#01282A',
          borderRadius: '16px',
          width: '100%',
          maxWidth: '900px',
          margin: 'auto',
          position: 'relative',
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <VideoDetailContent videoId={videoId} isModal={true} onClose={onClose} />
      </div>
    </div>
  );
};

export default VideoDetailModal;
