/**
 * Card component
 *
 * Generated by coz on 2016-12-31,
 * from a template provided by apeman-asset-templates.
 *
 * @function Card
 */
'use strict'

import React from 'react'
import classnames from 'classnames'
import defineDebug from 'debug'

const debug = defineDebug('project:fragment:card')

/** @lends Card */
const Card = ({
  image,
  imageElm,
  className,
  info,
  id,
  style,
  styleElm
}) => (
  <div className={ classnames('card', className) }
       id={ id }
       style={ style }
  >
    { styleElm || null }
    <div className="card-inner">

      {
        imageElm ? (
            <div className="card-col card-image-col">
              { imageElm }
            </div>
          ) : null
      }
      {
        image ? (
            <div className="card-col card-image-col">
              <div className="card-image-wrap">

                <img className='card-image'
                     src={ image }
                />
              </div>
            </div>
          ) : null
      }
      {
        info ? (
            <div className="card-col card-info-col">
              <table className="card-info-table">
                <tbody>
                {
                  Object.keys(info).map((key) => (
                    <tr key={ key }>
                      <th>{ key }</th>
                      <td>{ info[ key ] }</td>
                    </tr>
                  ))
                }
                </tbody>
              </table>
            </div>
          ) : null
      }

    </div>
  </div>
)

export default Card