import React from "react";
import styled from "styled-components";

const StyledCard = styled.div`
  & {
    // padding: 16px;
    font-family: "GilroyR";
    background-color: ${(props) => props.theme?.colors?.verisBgSecondary};
    border: 1px solid ${(props) => props.theme?.colors?.colorBorder};
    border-radius: ${(props) => props.theme?.antdToken?.borderRadius}px;
  }
`;

const CardTitle = styled.div`
  font-size: 18px;
  margin-bottom: 8px;
  padding: 16px 16px 8px;
  border-bottom: 1px solid ${(props) => props.theme?.colors?.colorBorder};
`;

const CardContent = styled.div`
  padding: 16px;
`;

const Card = (props) => {
  const { children = "Veris Card", backgroundColor, className = "", title = "", ...rest } = props;
  return (
    <StyledCard className={`veris-card ${className}`} backgroundColor={backgroundColor} {...rest}>
      {title && <CardTitle>{title}</CardTitle>}
      <CardContent>{children}</CardContent>
    </StyledCard>
  );
};

export default Card;