import { useMemo, useState } from "react";

type HoverVideoOptions = {
  cardLayout: string;
};

const noopIndex = (_: number) => () => {};
const stubFalse = (_: number) => false;

export function useHoverVideo({ cardLayout }: HoverVideoOptions) {
  const enabled = useMemo(() => cardLayout.includes("tiktok"), [cardLayout]);
  const [playingIndex, setPlayingIndex] = useState(0);

  return {
    showVideo: !enabled ? stubFalse : (index: number) => index === playingIndex,
    onMouseEnter: !enabled
      ? noopIndex
      : (index: number) => setPlayingIndex.bind(null, index),
    setPlayingIndex,
  };
}