
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에서는 노치/다이나믹 아일랜드를 고려한 여백 적용
 */
const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
  children,
  className = '',
  topOnly = false,
  bottomOnly = false
}) => {
  const [isIOS, setIsIOS] = useState(false);
  
  // 마운트 시 플랫폼 확인
  useEffect(() => {
    setIsIOS(isIOSPlatform());
  }, []);

  // 플랫폼에 따른 클래스 결정
  let safeAreaClass = '';
  
  if (isIOS) {
    if (!bottomOnly) safeAreaClass += ' pt-12'; // iOS 상단 안전 영역
    if (!topOnly) safeAreaClass += ' pb-8';     // iOS 하단 안전 영역
  } else {
    if (!bottomOnly) safeAreaClass += ' pt-4';  // 안드로이드 상단 여백
    if (!topOnly) safeAreaClass += ' pb-4';     // 안드로이드 하단 여백
  }

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

export default SafeAreaContainer;
