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;