import _isEmpty from 'lodash/isEmpty'
import _map from 'lodash/map'
import React from 'react'

export const Prewards = (props: IPrewardsProps) => {
  const {
    data,
    classNamePrefix = '',
    headerNode = (
      <>
        PRE
        <span>WARDS™</span>
      </>
    ),
  } = props
  return (
    <div className={`${classNamePrefix}_prewards`}>
      {!_isEmpty(data) && (
        <div className={`${classNamePrefix}_prewards_heder`}>{headerNode}</div>
      )}
      <div className={`${classNamePrefix}_prizes`}>
        {_map(data, prize => {
          const { description, name, image, id } = prize
          return (
            <div className={`${classNamePrefix}_prize`} key={id}>
              {image && <img className={`${classNamePrefix}_image`} alt="" src={image} />}
              <div className={`${classNamePrefix}_info`}>
                <h4 className={`${classNamePrefix}_name`}>{name}</h4>
                {description && (
                  <article className={`${classNamePrefix}_description`}>
                    {description}
                  </article>
                )}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}