import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Card from 'react-bootstrap/Card';

var RolesDeck = function RolesDeck(props) {
  var _props$icon = props.icon,
      icon = _props$icon === undefined ? false : _props$icon,
      data = props.dataRecord;

  //   Sample
  //   <RolesDeck
  //        icon - flag to show/hide the arrow icon.
  //        dataRecord - data record to be shown in card.
  //   />

  return React.createElement(
    'div',
    { className: 'rolesDeck' },
    React.createElement(
      Container,
      null,
      React.createElement(
        Row,
        null,
        data && data.map(function (row, index) {
          if (row && row.url && row.name) {
            return React.createElement(
              Col,
              { key: index, md: 12, lg: 6, counter: index++, style: { display: 'flex', flex: '1 0 auto' } },
              React.createElement(
                Card,
                { className: 'taxonomy-card', style: { position: 'relative', overflow: 'hidden', borderBottom: '3px solid var(--primary)' } },
                React.createElement(
                  Card.Link,
                  { href: row.url },
                  React.createElement(
                    Card.Body,
                    null,
                    React.createElement(
                      Row,
                      null,
                      React.createElement(
                        Col,
                        { className: 'details-content-wrapper' },
                        React.createElement(
                          'div',
                          { className: 'details-wrapper' },
                          row.name
                        )
                      )
                    ),
                    icon && React.createElement(
                      'span',
                      {
                        className: 'taxonomy-icon',
                        style: {
                          position: 'absolute',
                          right: '20px',
                          top: '50%',
                          transform: 'translateY(-50%) translateX(50px)',
                          transition: 'all .25s',
                          pointerEvents: 'none'
                        } },
                      '\u2192'
                    )
                  )
                )
              )
            );
          }
        })
      )
    ),
    icon && React.createElement(
      'style',
      { jsx: 'true' },
      '\n          .taxonomy-card .taxonomy-icon {\n            transform: translateY(-50%) translateX(10px) !important;\n          }\n          .taxonomy-card.card:hover .taxonomy-icon {\n            transform: translateY(-50%) translateX(5px) scale(1.25) rotate(-180deg) !important;\n          }\n        '
    )
  );
};

export default RolesDeck;
