function _extends() {
  _extends =
    Object.assign ||
    function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  return _extends.apply(this, arguments);
}

import React from 'react';
import styled from 'styled-components';
import { Avatar40 } from './Avatar';
export const AvatarWText = ({ image, name, email, initials }) => {
  return /*#__PURE__*/ React.createElement(
    AvatarWrapperT,
    null,
    /*#__PURE__*/ React.createElement(Avatar40, {
      image: image,
      alt: name,
      initials: initials,
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'name-info',
      },
      /*#__PURE__*/ React.createElement('h4', null, name),
      /*#__PURE__*/ React.createElement('p', null, email)
    )
  );
};
export const AvatarWTextCheckbox = ({
  image,
  name,
  email,
  initials,
  category,
  type,
  onChange,
  ...props
}) => {
  return /*#__PURE__*/ React.createElement(
    AvatarWTextCheck,
    null,
    /*#__PURE__*/ React.createElement(
      'input',
      _extends(
        {
          type: type,
          onChange: onChange,
          category: category,
        },
        props
      )
    ),
    /*#__PURE__*/ React.createElement(
      AvatarWrapperT,
      {
        className: 'info-dtls',
      },
      /*#__PURE__*/ React.createElement(Avatar40, {
        image: image,
        alt: name,
        initials: initials,
      }),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'name-info',
        },
        /*#__PURE__*/ React.createElement('h4', null, name),
        /*#__PURE__*/ React.createElement('p', null, email)
      )
    )
  );
};
export const AvatarWTextCheckboxStatus = ({
  name,
  type,
  title,
  value,
  checked,
  onChange,
}) => {
  return /*#__PURE__*/ React.createElement(
    AvatarWTextCheck,
    null,
    /*#__PURE__*/ React.createElement('input', {
      type: type,
      onChange: onChange,
      checked: checked,
      value: value,
      name: name,
    }),
    /*#__PURE__*/ React.createElement(
      AvatarWrapperT,
      {
        className: 'info-dtls',
        style: {
          marginTop: '2rem',
        },
      },
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'name-info',
        },
        /*#__PURE__*/ React.createElement('h4', null, title)
      )
    )
  );
};
export const AvatarSVGWText = ({ svg, title, summary }) => {
  return /*#__PURE__*/ React.createElement(
    AvatarWrapperT,
    null,
    /*#__PURE__*/ React.createElement(
      'svg',
      null,
      /*#__PURE__*/ React.createElement('use', {
        href: `/images/icons.svg#${svg}`,
      })
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'name-info',
      },
      /*#__PURE__*/ React.createElement(
        'h4',
        {
          className: 'small-text',
        },
        title
      ),
      /*#__PURE__*/ React.createElement('p', null, summary)
    )
  );
};
const AvatarWrapperT = styled.div`
    position: relative;
    display: flex;
    align-items: center;
    svg{
        width: 40px;
        height: 40px;
    }
    .name-info{
        margin-left: 1rem;
        h4{
            font-family: var(--ff-medium);
            font-weight: 500;
            color: #0A1045;
            font-size: 1.6rem;
            text-transform: capitalize;
        }
        .small-text{
            font-size: 1.4rem; 
        }
        p{
            font-family: var(--ff-body);
            font-weight: 400;
            font-size: 1.4rem;

    }
    
    

`;
const AvatarWTextCheck = styled.label`
  position: relative;
  input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: red;
    opacity: 0;
  }
  .info-dtls {
    padding-left: 4rem;
    &:before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background: #c5c9da;
      border-radius: 2px;
      border: 1.5px solid #c5c9da;
      transition: background-color 0.3s ease;
      background: #c5c9da;
    }
  }
  input:checked ~ .info-dtls:before {
    background: #004bff url(/images/check.svg) no-repeat center;
    background-size: 10px;
    border: 1.5px solid #004bff;
  }
`;
