
import React, { useEffect, useState } from 'react';
import { isIOSPlatform } from '@/utils/platform';

/**
 * 안전 영역(Safe Area) 디버그 컴포넌트
 * 노치나 다이나믹 아일랜드 등 iOS 기기의 안전 영역을 시각적으로 표시
 */
const SafeAreaDebug = () => {
  const [isIOS, setIsIOS] = useState(false);
  const [safeAreaTop, setSafeAreaTop] = useState('0px');
  const [safeAreaBottom, setSafeAreaBottom] = useState('0px');
  
  useEffect(() => {
    setIsIOS(isIOSPlatform());
    
    // iOS에서만 안전 영역 값 가져오기 시도
    if (isIOSPlatform()) {
      // CSS 변수에서 값 가져오기 시도
      const computedStyle = getComputedStyle(document.documentElement);
      const topInset = computedStyle.getPropertyValue('--safe-area-top') || 
                     computedStyle.getPropertyValue('env(safe-area-inset-top)') || 
                     '0px';
                     
      const bottomInset = computedStyle.getPropertyValue('--safe-area-bottom') || 
                        computedStyle.getPropertyValue('env(safe-area-inset-bottom)') || 
                        '0px';
      
      setSafeAreaTop(topInset);
      setSafeAreaBottom(bottomInset);
      
      console.info('iOS 안전 영역 감지:', {
        top: topInset,
        bottom: bottomInset
      });
    }
  }, []);
  
  if (!isIOS) {
    return null; // iOS가 아니면 렌더링하지 않음
  }
  
  return (
    <div className="fixed bottom-0 left-0 z-50 p-2 bg-black/70 text-white text-xs rounded-tr-md">
      <div>Safe Area Top: {safeAreaTop}</div>
      <div>Safe Area Bottom: {safeAreaBottom}</div>
    </div>
  );
};

export default SafeAreaDebug;
