'use client';
import { usePathname } from 'next/navigation';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

/** Routes rendered edge to edge (full-viewport explorers): no horizontal padding, no max width. */
export const FULL_BLEED_PREFIXES = ['/explore', '/trajectories'];

export function isFullBleed(pathname: string): boolean {
  return FULL_BLEED_PREFIXES.some((p) => pathname === p || pathname.startsWith(`${p}/`) || pathname.startsWith(`${p}?`));
}

/**
 * `<main>` wrapper: editorial container (1400 px, side padding) for content pages, full bleed for the
 * explorer views. Pathname-driven so the App Router tree needs no route-group shuffle.
 */
export function MainFrame({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const full = isFullBleed(pathname);
  return (
    <main id="main" data-layout={full ? 'full' : 'page'} className={cn('w-full flex-1', full ? 'min-w-0' : 'container-x mx-auto max-w-[1400px]')}>
      {children}
    </main>
  );
}