import React from 'react';
import 'lazysizes';
import 'lazysizes/plugins/parent-fit/ls.parent-fit';

const Card = (props) => {
    const category = props?.categories && props?.categories?.filter((item) => item.isDefault )[ 0 ] 
    return ( <div className="wizrd-blog-box">
    <div className="wizrd-blog-img">
      <div className="wizrd-blog-img-inner">
        <img
          data-sizes="auto"
          data-src={props.image}
          data-srcset={`
            ${props.image} 600w,
            ${props.image} 220w,
            ${props.image} 300w,
            ${props.image} 600w,
            ${props.image} 900w,
          `}
          alt={props.image}
          width={ 200 }
          height={ 150 }
          class="lazyload"
        />
        <span className="wizrd-blog-category">
          { category?.name || 'Other' }
        </span>
      </div>
    </div>
    <div className="wizrd-blog-detail">
      <div class="wizrd-blog-detail-inner">{
        props.children
      }</div>
    </div>
  </div>)
}

export default Card;