import React from 'react';
import dark_vangaurd from '../../dark_vangaurd.jpeg';

var Card = () => (
  <div className="d-flex min-height-100">
    <div
      className="m-0 text-left text-muted table-bordered min-height-100"
      style={{
        width: '35%',
        background: '#EEEEEE',
      }}
    >
      <p className="p-3 table-bordered">Item Details</p>
    </div>
    <div
      className="m-0 text-left text-muted table-bordered grow-1 min-height-100"
      style={{
        background: '#EEEEEE',
      }}
    >
      <p className="p-3 table-bordered">Item Properties</p>
      <div className="m-5 d-flex" >
        <div className="card-image p-0">
          <img src={dark_vangaurd} alt='dark vangaurd' />
        </div>
        <div className="card-info" style={{width: '400px', position:'relative'}}>
          <div className='min-width-100 d-flex justify-content-between align-items-center table-bordered' style={{background: '#E1E1E1'}}>
              <p className='m-0 p-3'>MANA COST</p>
              <p className="bg-dark p-3 pl-5 pr-5 m-0 text-white table-bordered">4</p>

          </div>
          <div className='min-width-100 d-flex justify-content-between align-items-center pt-2 pb-2' style={{background: '#FFF',}}>
            <p className='m-0 p-3'>Attack</p>
            <p className="p-3 pl-5 pr-5 m-0 text-white table-bordered" style={{background: '#B2B2B2'}}>3</p>
          </div>
          <div className='min-width-100 d-flex justify-content-between align-items-center pb-2' style={{background: '#fff'}}>
            <p className='m-0 p-3'>Defence</p>
            <p className="p-3 pl-5 pr-5 m-0 text-white table-bordered" style={{background: '#B2B2B2'}}>6</p>
          </div>
          <div className='min-width-100 d-flex justify-content-between align-items-center table-bordered text-muted' style={{background: '#E1E1E1'}}>
            <p className='m-0 p-3'>Exploring the outer limits</p>
          </div>
          <div className='min-width-100 d-flex justify-content-between align-items-center table-bordered' style={{background: '#3967b8', color:'#FFF', position:'absolute', bottom:'0'}}>
            <p className='m-0 p-3 font-weight-bold'>Rarity:</p>
            <p className='m-0 p-3 font-weight-bold'>Epic</p>
          </div>

        </div>
      </div>
    </div>
  </div>
);

export default Card;