import React, { memo } from "react";

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

import CustomImage from "../../../../../components/CustomImage/CustomImage";
import css from "./ShowroomThumbnailCard.module.less";

const SpottableComponent = Spottable("figure");

export default memo(function ShowroomThumbnailCard({
  thumbnailUrl,
  ariaLabel,
  ...rest
}) {
  return (
    <SpottableComponent className={css.card} aria-label={ariaLabel} {...rest}>
      <CustomImage alt="" delay={0} loading="lazy" src={thumbnailUrl} />
    </SpottableComponent>
  );
});
