import { Container, ImageBackground } from 'components/layout';
import { useResponsiveLayout, useTheme } from 'hooks';

export const SplashScreen = () => {
  const { activeThemeMode } = useTheme();
  const { height, width } = useResponsiveLayout();
  return (
    <Container
      style={{
        flex: 1,
        width,
        height,
        position: 'absolute',
      }}
      pointerEvents="none"
    >
      <ImageBackground
        style={{
          width,
          height,
          position: 'absolute',
        }}
        resizeMode="cover"
        source={
          activeThemeMode === 'light'
            ? require('assets/splash/light.png')
            : require('assets/splash/dark.png')
        }
      />
    </Container>
  );
};