import React from "react";

import Grid from "@mui/material/Grid2";

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

export interface CardRowProps extends React.PropsWithChildren {
  columns?: number;
  isReadable?: boolean;
}

export const CardRow: React.FC<CardRowProps> = ({
  children,
  columns: columnOverride,
  isReadable = true,
}) => {
  const { isCompact, isEditing, columns } = useCardContext();

  return (
    (isEditing || isReadable) && (
      <Grid
        container
        columns={columnOverride ?? columns}
        component="section"
        direction={"row"}
        my={isCompact && isEditing ? 0.5 : 0}
        spacing={3}
      >
        {children}
      </Grid>
    )
  );
};

export default CardRow;