import React from 'react';

const titleSize = 28;

function Card(props) {
    const {
        full = true,
        title,
        titleSpace,
        overVisible,
        padding,
        withBorder = true,
        withBg = "rgba(6,36,109,0.80)"
    } = props;
    return (
        <div className={'screen-card'}>
            {title && <div className="screen-card-title">
                {title}
            </div>}
            <div className="screen-card-content">
                <div className="box">
                    {React.Children.map(props.children, item => item)}
                </div>
            </div>
            <style jsx>{`
              .screen-card {
                background: ${withBg ? withBg : 'transparent'};
                border: 2px solid ${withBorder ? '#0072EE' : 'transparent'};
                border-radius: 8px;
                position: relative;
                color: white;
                height: ${full ? "100%" : "unset"}
              }

              .screen-card-title {
                background: #0072EE;
                font-size: 16px;
                font-weight: 600;
                line-height: ${titleSize}px;
                padding: 0 10px;
                display: inline-block;
                position: absolute;
                z-index: 1;
              }

              .screen-card-title:after {
                content: '';
                display: block;
                width: 10px;
                height: ${titleSize}px;
                position: absolute;
                right: -10px;
                bottom: 0;
                border-color: transparent;
                border-top-color: #0072EE;
                border-left-color: #0072EE;
                border-width: 14px 5px;
              }

              .screen-card-content {
                overflow: ${overVisible ? "visible" : "auto"};
                padding-top: ${titleSpace ? titleSize : 0}px;
                height: 100%;
              }

              .screen-card-content > .box {
                padding: ${padding ? padding : "unset"};
                min-height: 100%;
                height: 100%;
              }

              .screen-card-content::-webkit-scrollbar {
                width: 16px;
                height: 16px;
                background-color: transparent;
              }

              .screen-card-content::-webkit-scrollbar-track {
                border-radius: 10px;
                background-color: transparent;
              }

              .screen-card-content::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 0 4px #092062;
                background-color: #0072EE;
              }

              .screen-card-content::-webkit-scrollbar-corner {
                background-color: transparent;
              }
            `}</style>
        </div>
    );
}

export default Card;