import React from 'react';

import classNames from 'classnames';

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

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

const SpottableComponent = Spottable("li");

export default function PopularShowItem({ topInfosData, itemNum, ...rest }) {
  return (
    <SpottableComponent
      className={classNames(
        itemNum.thumbnailUrl960 == itemNum.thumbnailUrl
          ? css.listItemVertical
          : css.listItem
      )}
      {...rest}
    >
      <img src={itemNum.thumbnailUrl960} className={css.itemImg} />
      <div
        className={classNames(
          itemNum.thumbnailUrl960 == itemNum.thumbnailUrl
            ? css.verticalItem
            : css.horizonItem
        )}
      >
        <span className={css.logo}>
          <img src={itemNum.patncLogoPath} className={css.logoPath} />
        </span>
        <span className={css.showNm}>{itemNum.showNm}</span>
      </div>
    </SpottableComponent>
  );
}
