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

interface SafeAreaContainerProps {
  children: ReactNode;
  className?: string;
  topOnly?: boolean;
  bottomOnly?: boolean;
}

/**
 * 플랫폼별 안전 영역(Safe Area)을 고려한 컨테이너 컴포넌트
 * iOS에서는 노치/다이나믹 아일랜드를 고려한 여백 적용
 * CSS 변수와 env() 함수를 사용하여 정확한 안전 영역 계산
 */
const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
  children,
  className = '',
  topOnly = false,
  bottomOnly = false
}) => {
  const [isIOS, setIsIOS] = useState(false);
  
  // 마운트 시 플랫폼 확인
  useEffect(() => {
    setIsIOS(isIOSPlatform());
    
    // iOS 디버깅용 로그
    if (isIOSPlatform()) {
      console.info('iOS 플랫폼 감지됨 - 안전 영역 적용');
    }
  }, []);

  // 플랫폼에 따른 클래스 결정
  let safeAreaClass = '';
  
  if (isIOS) {
    safeAreaClass = 'ios-safe-area';
    
    if (bottomOnly) safeAreaClass += ' ios-safe-area-bottom-only';
    if (topOnly) safeAreaClass += ' ios-safe-area-top-only';
  } else {
    // 안드로이드 기본 여백
    safeAreaClass = 'android-safe-area';
  }

  return (
    <div className={`${safeAreaClass} ${className}`}>
      {children}
    </div>
  );
};

export default SafeAreaContainer;
