import * as React from "react";
import theme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";

interface grpProps {
  children?: JSX.Element | JSX.Element[];
  title: string;
  src?: string;
}

export const GRP: React.FC<grpProps> = ({ children, title, src }) => {
  return (
    <div
      style={{
        border: "1px solid white",
        // padding: 50,
        margin: 10,
        backgroundColor: theme.backgroundColor,
      }}
    >
      <p
        style={{
          color: "white",
          fontWeight: "bold" as "bold",
          fontFamily: "Open Sans",
          padding: "5px 20px",
        }}
      >
        {title}:
      </p>
      <div
        style={{
          border: "1px solid rgb(0,0,0,0.1)",
          backgroundColor: theme.foregroundColor,
        }}
      >
        {src && <img src={src} style={{ width: "100%" }} />}
        {children && children}
      </div>
    </div>
  );
};