import React from "react";
import PropTypes from "prop-types";

import Box from "../Box";
import Text from "../Text";

const Card = ({ heading, children, ...rest }) => {
  return (
    <Box
      flexDirection="column"
      alignItems="flex-start"
      data-testid="card-container"
      {...rest}
    >
      {heading && (
        <Text
          variant="h3.semi-bold"
          color="black.haptik"
          data-testid="card-heading"
        >
          {heading}
        </Text>
      )}
      <Box
        padding="zero"
        borderRadius="4px"
        borderWidth="1px"
        border="1px solid #D5D5D5"
        marginTop={heading ? "14px" : "0px"}
        overflow="hidden"
        data-testid="card-inner-container"
      >
        {children}
      </Box>
    </Box>
  );
};

Card.propTypes = {
  heading: PropTypes.string,
  children: PropTypes.node || PropTypes.string,
};

Card.defaultProps = {
  heading: "",
  children: "",
};

export default Card;
