import { FC } from "react";
import getConfig from "next/config";
import Head from "next/head";
import { Grid } from "@mui/material";
import { Layout } from "components/Layout";
import Iframe from "react-iframe";

type LeafcutterWrapperProps = {
  path: string;
};

export const LeafcutterWrapper: FC<LeafcutterWrapperProps> = ({ path }) => {
  const {
    publicRuntimeConfig: { leafcutterURL },
  } = getConfig();
  const fullLeafcutterURL = `${leafcutterURL}/${path}`;

  return (
    <Layout>
      <Head>
        <title>Link Shell</title>
      </Head>
      <Grid
        container
        spacing={0}
        sx={{ height: "100%", width: "100%" }}
        direction="column"
      >
        <Grid item sx={{ height: "100vh", width: "100%" }}>
          <Iframe
            id="link"
            url={fullLeafcutterURL}
            width="100%"
            height="100%"
            frameBorder={0}
          />
        </Grid>
      </Grid>
    </Layout>
  );
};
