"use client";

import React from "react";
import "../styles/index.css";
import "../styles/default-fonts.css";
import "../styles/output.css";
import { Providers } from "./Providers";
import type { BungeeConfig } from "./Providers/ConfigProvider";
import { HistoryModal } from "./components/History";
import { SettingsModal } from "./components/Settings";
import { Swap } from "./components/Swap";
import { TokenSelector } from "./components/TokenSelector";
import {
	BungeeImperativeAPI,
	type BungeeImperativeAPIType,
} from "./components/common/BungeeImperativeAPI";
import { CampaignBanners } from "./components/common/CampaignBanners";
import { CardTray } from "./components/common/CardTray";

export const Bungee = React.memo(
	React.forwardRef<BungeeImperativeAPIType, { config: BungeeConfig }>(
		({ config }, ref) => {
			if (!config?.apiKey) return <span>Please pass the api key</span>;

			return (
				<React.StrictMode>
					<Providers config={config}>
						<CardTray>
							<Swap />
							<CampaignBanners />

							{/* modals - takes up the full height available */}
							<TokenSelector />
							<HistoryModal />
							<SettingsModal />

							{/* External control for imperative handle */}
							<BungeeImperativeAPI ref={ref} />
						</CardTray>
					</Providers>
				</React.StrictMode>
			);
		},
	),
);
