import React from "react";
import { Grid, Typography, IconButton } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";

const WordCard = ({ word, id, deleteWord }) => {
  return (
    <Grid
      container
      alignItems="center"
      justifyContent="space-between"
      borderRadius={2}
      border={1}
    >
      <Grid item>
        <Typography margin={1}>{word}</Typography>
      </Grid>
      <Grid item>
        <IconButton onClick={() => deleteWord(id)}>
          <CloseIcon />
        </IconButton>
      </Grid>
    </Grid>
  );
};

export default WordCard;