import {StyleSheet} from "react-native";
import {useTheme} from "react-native-paper";
import {useMemo} from "react";

const modalStyles = StyleSheet.create({
    formItemName: {
        minWidth: 100,
        fontWeight: "400"
    },
    formItemRow: {
        flexDirection: "row",
        alignItems: "center"
    },
    formItemDivider: {
        marginVertical: 15
    },
    rootLayout: {
        display: "flex",
        gap: 10,
        justifyContent: "center",
        paddingHorizontal: 15,
        paddingTop: 25
    },
});

export function useModalStyles() {
    const theme = useTheme();
    return useMemo(() => StyleSheet.create({
        ...modalStyles,
        formItemInput: {
            flex: 1,
            color: theme.colors.onSurface
        },
        formFootnote: {
            fontSize: 13,
            color: theme.colors.outline
        },
        headerText: {
            color: theme.colors.primary
        }
    }), [theme]);
}