import React, { useEffect, useState } from "react";

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

import { $L } from "../../../utils/helperMethods";
import Indicator from "../components/Indicator";
import css from "../layout/ItemImage.module.less";

const SpottableComponent = Spottable("div");

export default function ItemImage({ productData }) {
  const [images, setImages] = useState();

  useEffect(() => {
    if (productData) {
      setImages(productData?.imgUrls);
    }
  }, [productData, images]);

  return (
    <SpottableComponent className={css.Wrap}>
      <Indicator images={images} />
      <div className={css.order}>
        <div>{$L("Call to Order")}</div>
        <div className={css.icon}>
          <span />
          <div>{productData?.orderPhnNo}</div>
        </div>
      </div>
    </SpottableComponent>
  );
}
