shoptime/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx

import React from 'react';

import Spotlight from '@enact/spotlight';
import Spottable from '@enact/spotlight/Spottable';
import { Marquee, MarqueeController } from '@enact/ui/Marquee';
import { compose } from 'ramda/src/compose';

import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
import CustomImage from '../../../../components/CustomImage/CustomImage';
import { SpotlightIds } from '../../../../utils/SpotlightIds';
import css from './LiveChannelNext.module.less';

const SpottableDiv = Spottable('div');

export default function LiveChannelNext({
  channelLogo,
  channelName = 'ShopLC',
  programName = 'Sandal Black...',
  backgroundColor = 'linear-gradient(180deg, #284998 0%, #06B0EE 100%)',
  onClick,
  spotlightId = 'live-channel-next-button',
}) {
  const handleSpotlightUp = (e) => {
    e.stopPropagation();
    e.preventDefault();
    Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
  };

  const handleSpotlightDown = (e) => {
    e.stopPropagation();
    e.preventDefault();
    Spotlight.focus('player-subtitlebutton');
  };

  const handleSpotlightRight = (e) => {
    e.stopPropagation();
    e.preventDefault();
    Spotlight.focus('player-subtitlebutton');
  };

  return (
    <div className={css.container}>
      <SpottableDiv
        className={css.liveChannelButton}
        onClick={onClick}
        spotlightId={spotlightId}
        onSpotlightUp={handleSpotlightUp}
        onSpotlightDown={handleSpotlightDown}
        onSpotlightRight={handleSpotlightRight}
      >
        <div className={css.logoWrapper}>
          <div className={css.logoBackground} style={{ background: backgroundColor }}>
            {channelLogo ? (
              <CustomImage src={channelLogo} alt={channelName} className={css.logoImage} />
            ) : (
              <div className={css.logoPlaceholder} />
            )}
          </div>
        </div>
        <Marquee className={css.channelName} marqueeOn="render">
          {channelName}
        </Marquee>
        <Marquee className={css.programName} marqueeOn="render">
          {programName}
        </Marquee>
        {/* <div className={css.iconWrapper}>
          <div className={css.playIcon} />
        </div> */}
        <div className={css.arrowIcon}>
          <img src={icon_arrow_dwon} alt="arrow down" />
        </div>
      </SpottableDiv>
    </div>
  );
}