import { useSwapContext } from "@src/context";
import { ChainPanel } from "./ChainPanel";
import { TokenPanel } from "./TokenPanel";
import { AmountPanel } from "./AmountPanel";

export const SwapPanel = () => {
  const { dstChain, dstToken } = useSwapContext();

  return (
    <div className="flex flex-col rounded-x_radius">
      <div className="flex flex-grow bg-t_bg_tertiary bg-opacity-5 rounded-t-x_radius">
        <TokenPanel type={"destination"} chain={dstChain} token={dstToken} />
        <ChainPanel type={"destination"} chain={dstChain} />
      </div>
      <div
        className={`flex justify-between rounded-b-x_radius bg-t_theme_color bg-opacity-20`}
      >
        <AmountPanel type={"destination"} />
      </div>
    </div>
  );
};