import { useSwapContext } from "@src/context";
import { useMemo } from "react";
import { Header } from "./Header";
import { HistoryView } from "./HistoryView";
import { SettingsView } from "./SettingsView";
import { SwapView } from "./SwapView";
import { UnifiedRoute } from "@src/models";

type Props = {
  onSubmit: (route: UnifiedRoute) => void;
  onClose: () => void;
};
export const Swap = ({ onClose }: Props) => {
  const { tab } = useSwapContext();

  const view = useMemo(() => {
    return tab === "Settings" ? (
      <SettingsView />
    ) : tab === "History" ? (
      <HistoryView />
    ) : (
      <SwapView />
    );
  }, [tab]);

  return (
    <div
      className={`relative flex flex-col gap-4 p-2 text-t_text_primary bg-t_bg_primary rounded-2xl flex-1`}
    >
      <Header onClose={onClose} />
      {view}
    </div>
  );
};