import {
    StyleSheet
} from "react-native";
import type {
    MarkdownDynamicStyles
} from "./type";

const stylesheet = StyleSheet.create({
    container: {
    },
    bold: {
        fontWeight: "bold"
    },
    italic: {
        fontStyle: "italic"
    },
    enter: {
        flexShrink: 1,
        width: "100%"
    },
    blockquoteText: {
        textAlignVertical: "bottom",
        verticalAlign: "bottom"
    },
    image: {
        maxWidth: "100%"
    },
    listContainer: {
        flexDirection: "row",
        alignItems: "center"
    },
    centerContainer: {
        justifyContent: "center",
        alignItems: "center",
        alignSelf: "center"
    },
    leftContainer: {
        justifyContent: "flex-start",
        alignItems: "flex-start",
        alignSelf: "flex-start"
    },
    rightContainer: {
        justifyContent: "flex-end",
        alignItems: "flex-end",
        alignSelf: "flex-end"
    }
});

export const useStyles = ({
    radiuses,
    colors,
    spaces
}: MarkdownDynamicStyles) => {
    const styles = {
        blockquoteContainer: {
            backgroundColor: colors.content.container.mid,
            borderRadius: radiuses.form,
            padding: spaces.spacingMd
        },
        blockquoteIcon: {
            marginBottom: spaces.spacingXs
        }
    };

    return styles;
};
export default stylesheet;