import {StyleSheet, ViewStyle} from 'react-native';

type FullScreenBlockStyle = ViewStyle & {
    width: number;
    height: number;
};

export const fullscreenBlock = (
    width: number,
    height: number,
): FullScreenBlockStyle => {
    return {
        width,
        height,
    };
};

export const landscapeBlock = (width: number): FullScreenBlockStyle => {
    return {
        width,
        height: (width * 9) / 16,
        overflow: 'hidden',
    };
};

export const styles = StyleSheet.create({
    block: {
        width: '100%',
        height: '100%',
        backgroundColor: 'black',
    },
    overlayBlock: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
    },
    overlayIcon: {
        fontSize: 150,
        color: '#dddddd',
        position: 'absolute',
        zIndex: 1,
    },
    background:{
        width: '100%', 
        height: '100%', 
        position: 'absolute',
        backgroundColor: '#082b39',
        opacity: 0.7,
    },
});