/**
*
* CapRadioCardCustom
*
*/
import PropTypes from "prop-types";
import React from 'react';
import {
  CAP_G06,
  CAP_COLOR_06,
  CAP_WHITE,
  CAP_SPACE_08,
  CAP_SPACE_12,
  CAP_SPACE_04,
 } from '@capillarytech/cap-ui-library/styled/variables';

import styled from 'styled-components';
import { CapDivider } from "@capillarytech/cap-ui-library";
function CapRadioCardCustom(props) {
  const {
    showSelected,
    wrapperStyle,
    component,
  } = props;
  const RadioLeftContainer = styled.div`
    width: 62px;
    height: 64px;
    margin: 0 ${CAP_SPACE_12} ${CAP_SPACE_04} 0;
    padding: 5px 0 0;
    border-radius: ${CAP_SPACE_08};
    border: solid 1px ${CAP_G06};
    background-color: ${CAP_WHITE};
`;
  const BottomContainer = styled.div`
    width: 60px;
    height: 41px;
    padding: 9px 20px ${CAP_SPACE_08};
    border-bottom-left-radius: ${CAP_SPACE_08};
    border-bottom-right-radius: ${CAP_SPACE_08};
    background-color: ${(styledProps) => styledProps.selected ? CAP_COLOR_06 : CAP_WHITE};
`;
  const TopContainer = styled.div`
    width: ${(styledProps) => styledProps.width};
    height: 5px;
    margin: 0 25px 2px 2px;
    background-color: ${CAP_G06};
`;
  return (
    <RadioLeftContainer>
      <TopContainer width="13px"/>
      <TopContainer width="38px"/>
      <CapDivider style={{margin: '4px 0px -1px'}}></CapDivider>
      <BottomContainer style={wrapperStyle} selected={showSelected}>
        {component}
      </BottomContainer>
    </RadioLeftContainer>
  );
}

CapRadioCardCustom.propTypes = {
  component: PropTypes.any,
  wrapperStyle: PropTypes.any,
  showSelected: PropTypes.string,
};

export default CapRadioCardCustom;
