import {StyleSheet} from "react-native";

const styles = StyleSheet.create({
    //StatusPage
    container: { flex: 1, alignItems: "stretch" },
    listContainer: {
        flex: 1,
        width: "100%",
        backgroundColor: 'transparent',
        flexDirection: "row",
        justifyContent: "space-between",
        //alignItems: "flex-start", // Aligns subheaders properly
        paddingHorizontal: 10, // Adds some spacing
    },
    listSubheader: {
        fontFamily: "Medium",
        fontSize: 18, // Larger text
        textAlign: "center", // Center the text
        fontWeight: "bold", // Make it more distinct
        marginBottom: 10, // Add spacing below
        zIndex: 0,
    },
    //listWrapper: { flex: 1, padding: 5 },
    listColumn: { flex: 1, paddingHorizontal: 5,  zIndex: 1},
    buttonContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignSelf: "stretch",
        verticalAlign: "bottom",
        paddingHorizontal: 10,
        paddingBottom: 20,
        marginHorizontal: 5,
    },
    actionButton: {
        flex: 1,
        marginHorizontal: 5,
    },
    card: {
        marginVertical: 5,
        elevation: 4, // Android shadow
        shadowColor: "#000", // iOS shadow
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 4,
        borderRadius: 10,
    },
    imageBackground: {
        position: "absolute",  // Allows child elements to layer on top
        width: "100%",         // Ensure full coverage of the column
        height: "100%",        // Fully stretches to column height
        resizeMode: "cover",   // Ensures it fits well
        opacity: 0.2,          // Fades the image
        zIndex: -1,
    },
    //profile screen
    themeContainer: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignSelf: 'center',
        //alignItems: 'center',
        marginTop: 10,
    },
    themeButton: {
        width: 50,
        height: 50,
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'flex-start',
        overflow: 'hidden',
        borderWidth: 1,
        borderColor: 'black',
    },
    halfCircle: {
        width: '50%',
        height: '100%',
        position: 'absolute',
        bottom: 0,
    },
    //Nav
    logoContainer: { flex: 1, alignItems: "center" },
    logo: { width: 140, height: 70 },
    topBar: {
        zIndex: 4,
        flexDirection: "row",
        justifyContent: "space-between",
        width: "100%",
        alignSelf: "stretch"
    },
    bottomBar: { height: 38 },
    //index
    indexImageBackground: {
        position: "absolute",  // Allows child elements to layer on top
        width: "100%",         // Ensure full coverage of the column
        height: "100%",        // Fully stretches to column height
        resizeMode: "cover",   // Ensures it fits well
        opacity: 0.3,          // Fades the image
    },
    indexContainer: { flex: 1, alignItems: "stretch" },
    overlay: {

    },
    drawerContainer: {
        ...StyleSheet.absoluteFillObject,
        marginTop: 70,
        width: 200,
        height: "auto",
        //elevation: 4,
        //backgroundColor: "rgba(0, 0, 0, 0.5)",
        justifyContent: "flex-start",
        alignItems: "flex-start",
        zIndex: 2, // Ensures the drawer is above everything
        elevation: 5, // Android shadow priority
        borderRadius: 10,
    },
    footer: {
        padding: 16,
        alignItems: "center",
    },
    closeText: {
        color: "#6200ee",
        fontWeight: "bold",
    },
});

export default styles;