import { Grid } from "../grid/Grid";
import TaskAltIcon from "@mui/icons-material/TaskAlt";
import { PropTypes } from "prop-types";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import LockIcon from "@mui/icons-material/Lock";

export const StateStepper = ({ state, children }) => {
  const completedJSX = (
    <Grid container alignItems="center">
      <Grid>
        <TaskAltIcon />
      </Grid>
      <Grid>{children}</Grid>
    </Grid>
  );

  const pendingJSX = (
    <Grid container alignItems="center">
      <Grid>
        <MoreHorizIcon />
      </Grid>
      <Grid>{children}</Grid>
    </Grid>
  );

  const lockedJSX = (
    <Grid container alignItems="center">
      <Grid>
        <LockIcon />
      </Grid>
      <Grid>{children}</Grid>
    </Grid>
  );

  return (
    <>
      {state === "completed" && completedJSX}
      {state === "pending" && pendingJSX}
      {state === "locked" && lockedJSX}
    </>
  );
};

StateStepper.propTypes = {
  state: PropTypes.any,
  children: PropTypes.any,
};
