import { ReactNode } from "react";
import { useIsMobile } from "@/hooks/use-mobile";

interface TripLayoutProps {
  mainContent: ReactNode;
  sideContent?: ReactNode;
}

export function TripLayout({ mainContent, sideContent }: TripLayoutProps) {
  const isMobile = useIsMobile();

  return (
    <div className="relative">
      {isMobile ? (
        // Mobile layout - just show main content (itinerary)
        <div>{mainContent}</div>
      ) : (
        // Desktop layout - show main content and side content in a grid
        <div className="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
          <div>{mainContent}</div>
          {sideContent && <aside className="xl:sticky xl:top-24 xl:self-start">{sideContent}</aside>}
        </div>
      )}
    </div>
  );
}