import React from 'react';

import classNames from 'classnames';

import Spottable from '@enact/spotlight/Spottable';

import css from './TCFI_3.module.less';

const SpottableComponent = Spottable("li");

export default function TCFI_3({ className, data }) {
  console.log("##data", data);
  return (
    <>
      {data &&
        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
          return (
            <div key={tmpltCd} className={classNames(className && className)}>
              <div className={css.fullImg}>
                <img src={bgImgPath} alt={curationNm} />
              </div>
              <ul className={css.itemList}>
                {productInfos &&
                  productInfos.slice(0, 3).map(({ imgUrl, prdtNm, prdtId }) => {
                    return (
                      <SpottableComponent key={prdtId}>
                        <img src={imgUrl} alt={prdtNm} />
                      </SpottableComponent>
                    );
                  })}
              </ul>
            </div>
          );
        })}
    </>
  );
}
