import { Canvas } from '@shopify/react-native-skia';
import type { ReactNode } from 'react';
import { Dimensions, StyleSheet } from 'react-native';

const { width: W, height: H } = Dimensions.get('window');

type Props = {
  children: ReactNode;
};

export function AnimationOverlay({ children }: Props) {
  return (
    <Canvas style={styles.canvas} pointerEvents="none">
      {children}
    </Canvas>
  );
}

const styles = StyleSheet.create({
  canvas: { position: 'absolute', top: 0, left: 0, width: W, height: H },
});