import React from 'react';

import classNames from 'classnames';

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

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

const SpottableComponent = Spottable("li");

export default function TCFV_3({ className, data }) {
  console.log("##data", data);
  return (
    <>
      {data &&
        data.map(
          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
            return (
              <div
                key={tmpltCd}
                className={classNames(className && className, css.flexCont)}
              >
                <div className={css.fullImg}>
                  {showInfos &&
                    showInfos
                      .slice(0, 1)
                      .map(
                        ({
                          dfltThumbnailImgPath,
                          showId,
                          showNm,
                          showUrl,
                          thumbnailUrl,
                        }) => {
                          // @@@ 영상 출력 처리
                          return (
                            <SpottableComponent key={showId}>
                              <img
                                src={thumbnailUrl}
                                alt={showNm}
                                className={css.video}
                              />
                              {/* <video src={showUrl}></video> */}
                            </SpottableComponent>
                          );
                        }
                      )}
                </div>
                <ul className={css.itemList}>
                  {productInfos &&
                    productInfos
                      .slice(0, 4)
                      .map(({ imgUrl, prdtNm, prdtId }) => {
                        return (
                          <SpottableComponent key={prdtId}>
                            <img src={imgUrl} alt={prdtNm} />
                          </SpottableComponent>
                        );
                      })}
                </ul>
              </div>
            );
          }
        )}
    </>
  );
}
