import React from "react";
import { Card as BaseCard, StyledBody, StyledAction } from "baseui/card";

export interface CardProps {
  children?: React.ReactNode;
  actions?: React.ReactNode;
  headerImage?: string;
  overrides?: any;
}

/**
 * This is the `<Card>` component <br />
 * Use this to render data within a constrained box
 */
const Card: React.FC<CardProps> = (props) => {
  const { children, actions } = props;
  return (
    <BaseCard
      {...props}
      overrides={{
        Root: {
          style: () => ({
            padding: "28px 0 31px",
            borderRadius: "6px",
            boxShadow: "0 2px 4px 0 rgba(145, 141, 141, 0.5)",
            border: "none",
            width: "80vw",
          }),
        },
      }}
    >
      <StyledBody>{children}</StyledBody>
      <StyledAction>{actions}</StyledAction>
    </BaseCard>
  );
};

export default Card;