import React, { useContext } from "react";
import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
import { PlayerContainerContext } from "../../PlayerContainerContext";
import { ComponentWrapperProps } from "./index";

export const ComponentFocusableWrapperView = (props: ComponentWrapperProps) => {
  const { bottomFocusableId } = useContext(PlayerContainerContext);

  return (
    <Focusable id={bottomFocusableId} nextFocusUp={props.nextFocusUp}>
      {(focused, parentFocus) => props.children(focused, parentFocus)}
    </Focusable>
  );
};