'use client';

import { useNavigation } from '@/hooks/useNavigation';
import { ReactNode } from 'react';

interface FullScreenMapWrapperProps {
  readonly children: ReactNode;
}

export function FullScreenMapWrapper({ children }: FullScreenMapWrapperProps) {
  const { isMobile } = useNavigation();

  if (isMobile) {
    // Mobile: occupy full viewport minus header & bottom nav, respect safe areas
    // Use CSS env() for notch devices; fallback numbers approximate existing heights
    return (
      <div
        className="fixed inset-0 z-10 bg-white dark:bg-gray-900 overflow-hidden"
        style={{
          paddingTop: 'calc(64px + env(safe-area-inset-top, 0px))',
          paddingBottom: 'env(safe-area-inset-bottom, 0px)'
        }}
      >
        <div className="w-full h-full relative">
          {children}
        </div>
      </div>
    );
  }

  // For desktop: cover available viewport height without extra padding
  return (
    <div className="fixed top-16 bottom-0 left-0 right-0 z-10 bg-white dark:bg-gray-900 overflow-hidden">
      {children}
    </div>
  );
}