import React, { type ReactNode } from "react";
import { ErrorBoundary } from "react-error-boundary";

import { useTheme } from "@hooks/useTheme";
import { ErrorBoundaryFallback } from "./ErrorBoundaryFallback";

/**
 * Meant for big screens / slide-ins to give em enough space
 */
export const CardTray = ({ children }: { children: ReactNode }) => {
	const { width } = useTheme();
	const containerStyle = {
		width: width === "full" ? "100%" : width?.toString().concat("px"),
	};

	return (
		<div
			className="bn-swap-wrap bn-min-h-[500px] bn-relative"
			style={containerStyle}
			id="bn-swap-wrap"
		>
			<ErrorBoundary fallback={<ErrorBoundaryFallback />}>{children}</ErrorBoundary>
		</div>
	);
};
