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

export default function IntroSemantic({
  wordOne,
  wordTwo,
  onChangeWordOne,
  onChangeWordTwo,
  onPressButton,
}) {
  return (
    <>
      <Grid container textAlign={"center"} justifyContent={"center"}>
        <Grid item textAlign={"center"} mb={5}>
          <Typography
            variant="h0"
            color="#000"
            sx={{ borderBottom: "2px solid #000" }}
          >
            Semantic Differences
          </Typography>
        </Grid>
        <Grid container textAlign={"center"} spacing={2}>
          <Grid item xs={3}>
            <TextField
              id="word-one"
              label="Word 1"
              variant="outlined"
              value={wordOne}
              onChange={onChangeWordOne}
              fullWidth
            />
          </Grid>
          <Grid item xs={3}>
            <TextField
              id="word-one"
              label="Word 2"
              variant="outlined"
              value={wordTwo}
              onChange={onChangeWordTwo}
              fullWidth
            />
          </Grid>

          <Grid item xs={3}>
            <Button
              variant="contained"
              color="primary"
              fullWidth
              sx={{ height: "100%" }}
              onClick={onPressButton}
            >
              Substract Embeddings
            </Button>
          </Grid>
          <Grid item xs={3}>
            <Typography
              variant="h0"
              color="#000"
              sx={{ borderBottom: "2px solid #000" }}
            >
              Active Words's List
            </Typography>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
}