import { CircularProgress, Grid2 as Grid } from "@mui/material";
import { CheckCircleOutline } from "@mui/icons-material";

interface Props {
  pending: boolean;
  accepted: boolean;
  text: string;
}

/**
 * Small inline status line used inside cards: a loading circle beside the
 * caption while changes are pending, and a checkmark once they are accepted.
 * Derive the flags with usePendingChanges (or per-item tracking like
 * InteractionsOverview does).
 */
export default function PendingChangesIndicator(props: Props) {
  const { pending, accepted, text } = props;
  if (!pending && !accepted) return null;

  return (
    <Grid container spacing={0.5} alignItems="center">
      {pending && <CircularProgress size={10} thickness={5} color="inherit" />}
      {accepted && <CheckCircleOutline sx={{ fontSize: 13, color: "var(--status-ok)" }} />}
      <Grid>{text}</Grid>
    </Grid>
  );
}