import { StyleSheet } from "react-native";
import { baseButton, baseInput, baseText } from "../theme/baseStyles";
import { typography } from "../theme/typography";

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        padding: 20,
    },
    logoContainer: {
        alignItems: "center",
        marginBottom: 40,
    },
    title: {
        ...baseText.h1,
        fontSize: typography.sizes.title,
        letterSpacing: 1.5,
        textAlign: "center",
        marginTop: 20,
        marginBottom: 10,
    },
    subtitle: {
        ...baseText.body,
        fontSize: typography.sizes.subtitle,
        textAlign: "center",
        marginBottom: 40,
    },
    formContainer: {
        width: "100%",
        maxWidth: 400,
        alignSelf: "center",
    },
    inputWrapper: {
        marginBottom: 20,
    },
    label: {
        ...baseInput.label,
    },
    inputContainer: {
        ...baseInput.container,
        flexDirection: "row",
        alignItems: "center",
    },
    inputContainerFocused: {
        ...baseInput.containerFocused,
    },
    input: {
        ...baseInput.input,
        flex: 1,
    },
    eyeButton: {
        padding: 12,
    },
    errorText: {
        color: "#D32F2F",
        fontSize: 14,
        fontFamily: typography.regular,
        marginTop: 8,
        marginLeft: 4,
    },
    buttonWrapper: {
        ...baseButton.wrapper,
        marginTop: 10,
        marginBottom: 20,
    },
    button: {
        ...baseButton.button,
    },
    buttonDisabled: {
        opacity: 0.6,
    },
    buttonText: {
        ...baseButton.text,
    },
    loadingContainer: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    loadingText: {
        ...baseText.body,
        marginTop: 16,
    },
});
