import {StyleSheet} from "react-native";

const styles = StyleSheet.create({
    //StatusPage
    container: { flex: 1, alignItems: "stretch" },
    listContainer: { flex: 1, width: "100%", backgroundColor: 'transparent' },
    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 },
    listRow: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "flex-start", // Aligns subheaders properly
        paddingHorizontal: 10, // Adds some spacing
    },
    listColumn: { flex: 1, paddingHorizontal: 5,  zIndex: 1},
    buttonContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignSelf: "stretch",
        paddingHorizontal: 10,
        paddingBottom: 20,
    },
    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: { },
    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" },
});

export default styles;