import React from "react";

import MuiCardActions from "@mui/material/CardActions";

import { useCardContext } from "../../contexts/CardContext";

export interface CardActionsProps extends React.PropsWithChildren {
  /**
   * If `true`, the actions will always be visible, regardless of the card's `edit` state.
   */
  alwaysVisible?: boolean;
}

export const CardActions: React.FC<CardActionsProps> = ({ alwaysVisible, children }) => {
  const { alwaysEditable, isCompact, isEditing } = useCardContext();

  return (
    Boolean(alwaysEditable || alwaysVisible || isEditing) && (
      <MuiCardActions
        sx={{
          px: isCompact ? 2 : 3,
          pt: 1,
          pb: 2,
          display: "flex",
          justifyContent: "flex-end",
        }}
      >
        {children}
      </MuiCardActions>
    )
  );
};

export default CardActions;