import React from "react";

import MuiCardContent, { CardContentProps as MuiCardContentProps } from "@mui/material/CardContent";
import Stack from "@mui/material/Stack";

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

export interface CardContentProps extends MuiCardContentProps, React.PropsWithChildren {}

export const CardContent: React.FC<CardContentProps> = ({ children, ...props }) => {
  const { isCompact } = useCardContext();

  return (
    <MuiCardContent
      sx={{
        px: isCompact ? 2 : 3,
        pb: isCompact ? "calc(2 * var(--mui-spacing)) !important" : 3,
        ...props.sx,
      }}
      {...props}
    >
      <Stack gap={isCompact ? 1 : 3}>{children}</Stack>
    </MuiCardContent>
  );
};

export default CardContent;