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

import { useLogError } from "@hooks/useLogError";
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 { logError } = useLogError();

	const containerStyle = {
		width: width === "full" ? "100%" : width?.toString().concat("px"),
	};

	return (
		<div
			className="bn-swap-wrap bn-relative bn-h-full bn-min-h-[500px]"
			style={containerStyle}
			id="bn-swap-wrap"
		>
			<ErrorBoundary
				fallback={<ErrorBoundaryFallback />}
				onError={(error) => logError(error, { screen: "error boundary" })}
			>
				{children}
			</ErrorBoundary>
		</div>
	);
};
