import { Dimensions, StyleSheet } from 'react-native';
import { GlobalTheme, Screen } from '../../../theme';
import { normalize } from '../../../utilis/responsive';

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

export const styles = StyleSheet.create({
    container: {
        // flex: 1,
        // paddingHorizontal: 5
        flex: 1,
        backgroundColor: GlobalTheme.colors.primary,
    },
    logoContainer: {
        alignItems: 'center',
    },
    appLogo: {
        height: normalize(170),
        width: '100%',
        resizeMode: 'contain',
        marginTop: 40
    },
    titleContainer: {
        alignSelf: 'center',
    },
    titleText: {
        fontSize: 18,
        fontWeight: '500',
        color: GlobalTheme.colors.black,
        textAlign: 'center'
    },
    btnbg: {
        backgroundColor: GlobalTheme.colors.secondary, borderRadius: GlobalTheme.borderRadius.md
    },
    btntext: {
        color: GlobalTheme.colors.white,
        fontSize: GlobalTheme.typography.fontSize.medium
    },
    otp_inputStyle: {
        textAlign: 'center',
        backgroundColor: 'red',
        width: 100,
        borderRadius: 4,
        paddingVertical: 10,
        paddingHorizontal: 15,
        height: 50,
        color: 'red',
        marginBottom: 10,
        marginRight: 10,
        fontSize: 25,
    },
    // OTP 
    pinCodeContainer: {
        width: 45,
        height: 55,
        borderWidth: 1,
        borderColor: '#D8E3F1',
        borderRadius: 8,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    activePinCodeContainer: {
        borderColor: GlobalTheme.colors.primary,
        borderWidth: 2,
    },
    filledPinCodeContainer: {
        backgroundColor: '#D8E3F1',
    },
    disabledPinCodeContainer: {
        backgroundColor: '#f0f0f0',
        borderColor: '#ddd',
    },
    pinCodeText: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#333',
    },
    focusStick: {
        height: 2,
        width: 20,
        backgroundColor: GlobalTheme.colors.primary,
        marginTop: 4,
    },
    placeholderText: {
        color: '#aaa',
        fontSize: 18,
    },
    resendText: {
        color: GlobalTheme.colors.primary,
        fontWeight: 'bold',
        fontSize: 14,
        marginTop: 20,
        textAlign: 'center',
    },
    timerText: {
        color: 'gray',
        fontSize: 14,
        marginTop: 20,
        textAlign: 'center',
    },
    resendOTP: {
        color: GlobalTheme.colors.secondary, fontWeight: GlobalTheme.typography.fontWeight.medium, fontSize: GlobalTheme.typography.fontSize.small
    },
    iconStyle: {
        height: 20,
        width: 20,
        resizeMode: 'contain',
        tintColor: GlobalTheme.colors.white
    },
    backIconText: { fontSize: GlobalTheme.typography.fontSize.small, color: GlobalTheme.colors.white, fontWeight: GlobalTheme.typography.fontWeight.medium, marginLeft: 8 },
    backTextView: {
        flexDirection: 'row', alignItems: 'center', paddingTop: 20, paddingHorizontal: 10
    },
    card: {
        backgroundColor: GlobalTheme.colors.white,
        borderTopLeftRadius: GlobalTheme.borderRadius.xxlg || normalize(20),
        borderTopRightRadius: GlobalTheme.borderRadius.xxlg || normalize(20),
        padding: normalize(20),
        width: width,
        alignSelf: 'center',
        // marginTop: normalize(30),
        shadowColor: '#000',
        shadowOpacity: 0.05,
        shadowOffset: { width: 0, height: 4 },
        shadowRadius: 8,
        elevation: 4,
        flex: 1,
        minHeight : height * 0.7
    },
    footer: {
        marginTop: 60,
        alignItems: 'center',
    },
    footerImage: {
        width: '100%',
        height: normalize(80),
        resizeMode: 'contain',
        marginTop: normalize(160),
    },
    AuthBottomBG: {
        width: '100%',
        resizeMode: 'contain',
        height: normalize(270),
        justifyContent: 'center',
        marginTop: normalize(-40),
    },

});
