import { Button, Grid, TextField, Typography } from "@mui/material";
import React from "react";

export default function IntroWordRepresentation({
  wordOne,
  onChangeWordOne,
  onPressButton,
}) {
  return (
    <>
      <Grid container textAlign={"center"} spacing={2}>
        <Grid item xs={5}>
          <TextField
            id="word-one"
            label="Word 1"
            variant="outlined"
            value={wordOne}
            onChange={onChangeWordOne}
            fullWidth
          />
        </Grid>
        <Grid item xs={4}>
          <Button
            variant="contained"
            color="primary"
            fullWidth
            sx={{ height: "100%" }}
            onClick={onPressButton}
          >
            Create Embedding
          </Button>
        </Grid>
        <Grid item xs={3}>
          <Typography
            variant="h0"
            color="#000"
            sx={{ borderBottom: "2px solid #000" }}
          >
            Active Words's List
          </Typography>
        </Grid>
      </Grid>
    </>
  );
}