
import React from 'react';
import { cn } from '@/lib/utils';

interface SafeAreaContainerProps {
  children: React.ReactNode;
  className?: string;
  extraBottomPadding?: boolean;
}

/**
 * iOS의 안전 영역(notch, home indicator 등)을 고려한 컨테이너
 * 모든 페이지 최상위 컴포넌트로 사용해야 함
 */
const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
  children,
  className = '',
  extraBottomPadding = false
}) => {
  return (
    <div
      className={cn(
        'min-h-screen bg-neuro-background',
        'pt-safe pb-safe pl-safe pr-safe', // iOS 안전 영역 적용
        extraBottomPadding ? 'pb-24' : '',
        className
      )}
    >
      {children}
    </div>
  );
};

export default SafeAreaContainer;
