import React from "react";
import { View, ViewStyle } from "react-native";
import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";

type Props = {
  styles?: ViewStyle;
  videoStyle: { width: number; height: number };
};

const bufferStyles = ({ width, height }): ViewStyle => ({
  flex: 1,
  width,
  height,
  position: "absolute",
  alignItems: "center",
  justifyContent: "center",
});

const bufferFocusableGroupName = "PlayerWrapper-BufferAnimationComponent";

export function BufferAnimation(props: Props) {
  const { videoStyle = {} } = props;

  return (
    <View
      testID={bufferFocusableGroupName}
      style={bufferStyles(videoStyle as { width: number; height: number })}
    >
      <Spinner size="large" {...props} />
    </View>
  );
}