import { Grid } from "@mui/material";
import ActiveWords from "../ActiveWords";
import CreateWordEmbedding from "../CreateWord/CreateWord";
import { WordsContext } from "../Context/WordsContext";
import { useEffect, useState } from "react";

export default function Body() {
  const [words, setWords] = useState([]);
  const fetchWords = async () => {
    const response = await fetch("http://localhost:8000/api/words");
    const words = await response.json();
    setWords(words.data);
  };
  useEffect(() => {
    fetchWords();
  }, []);
  return (
    <>
      <WordsContext.Provider value={{ words, fetchWords }}>
        <Grid container mt={2} mr={2} ml={2} textAlign={"center"} spacing={2}>
          <Grid item xs={9}>
            <CreateWordEmbedding />
          </Grid>

          <Grid item xs={3}>
            <ActiveWords />
          </Grid>
        </Grid>
      </WordsContext.Provider>
    </>
  );
}