// src/views/HomePanel/HomeBanner/SimpleVideoContainer.jsx

import React from "react";
import Spottable from "@enact/spotlight/Spottable";
import css from "./RandomUnit.module.less";

const SpottableComponent = Spottable("div");

export default function SimpleVideoContainer({
  spotlightId,
  isHorizontal,
  handleShelfFocus,
}) {
  return (
    <SpottableComponent
      className={`${css.itemBox} ${isHorizontal ? css.isHorizontal : ""}`}
      spotlightId={spotlightId}
      onFocus={handleShelfFocus}
      style={{
        position: "relative",
        // 더 정확한 크기 설정 (RandomUnit과 동일하게)
        width: "100%",
        height: "100%",
        backgroundColor: "transparent",
      }}
    >
      {/* 완전 투명한 컨테이너 - 비디오 오버레이 타겟 */}
      <div
        style={{
          width: "100%",
          height: "100%",
          opacity: 0,
          minHeight: "inherit", // 부모의 최소 높이 상속
        }}
      />
    </SpottableComponent>
  );
}
