import React, { useEffect } from 'react';

import classNames from 'classnames';

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

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

const SpottableComponent = Spottable("li");
const SpottableComponentDiv = Spottable("div");

export default function TCFV({ className, data }) {
  useEffect(() => {
    Spotlight.focus("spotData");
  }, [data]);
  return (
    <>
      {data &&
        data.map(({ bgImgPath, curationNm, tmpltCd, showInfos }) => {
          return (
            <div key={tmpltCd} className={classNames(className && className)}>
              <SpottableComponentDiv
                className={css.fullImg}
                spotlightId="spotData"
              >
                <img src={bgImgPath} alt={curationNm} />
              </SpottableComponentDiv>
              <ul className={css.itemList}>
                <SpottableComponent>
                  <img src={bgImgPath} alt={curationNm} />
                  {/* <video src={showUrl}></video> */}
                </SpottableComponent>
                {/* {showInfos &&
                  showInfos
                    .slice(0, 1)
                    .map(
                      ({
                        dfltThumbnailImgPath,
                        showId,
                        showNm,
                        showUrl,
                        thumbnailUrl,
                      }) => {
                        // @@@ 영상 출력 처리
                        return (
                          <SpottableComponent key={showId}>
                            <video src={showUrl}></video>
                          </SpottableComponent>
                        );
                      }
                    )} */}
              </ul>
            </div>
          );
        })}
    </>
  );
}
