import React, { useEffect } from 'react';

import classNames from 'classnames';

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

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

const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused", preserveId: true },
  "div"
);

export default function TCHH({ className, data }) {
  useEffect(() => {
    if (data) {
      Spotlight.focus("spotlight0");
    }
  }, [data]);
  return (
    <>
      {data &&
        data.map(({ bgImgPath, curationNm, tmpltCd }) => {
          return (
            <div
              key={tmpltCd}
              className={classNames(className && className, css.halfWrap)}
            >
              <Container>
                {bgImgPath &&
                  bgImgPath.slice(0, 2).map((bgImgPath, idx) => {
                    return (
                      <SpottableComponent
                        key={idx}
                        spotlightId={"spotlight" + idx}
                      >
                        <img src={bgImgPath} alt={curationNm} />
                      </SpottableComponent>
                    );
                  })}
              </Container>
            </div>
          );
        })}
    </>
  );
}
