import { StyleSheet } from "react-native";
import { colors } from "./colors";
import { shadows } from "./shadows";
import { typography } from "./typography";

/**
 * Base component styles for consistent UI patterns across the app.
 * Use these as building blocks in your view-specific style files.
 */

// ============================================
// TEXT STYLES
// ============================================

export const baseText = StyleSheet.create({
    h1: {
        fontSize: typography.sizes.h1,
        fontFamily: typography.semibold,
        color: colors.brandOrange1,
        letterSpacing: 0.5,
        marginBottom: 0,
    },

    h2: {
        fontSize: typography.sizes.h2,
        fontFamily: typography.semibold,
        color: colors.brandOrange1,
        marginBottom: 0,
    },

    h3: {
        fontSize: typography.sizes.h3,
        fontFamily: typography.semibold,
        color: colors.textDark,
        marginBottom: 0,
    },

    body: {
        fontSize: typography.sizes.body,
        fontFamily: typography.regular,
        color: colors.textDark,
    },

    bodySmall: {
        fontSize: typography.sizes.bodySmall,
        fontFamily: typography.regular,
        color: colors.textDark,
    },

    label: {
        fontSize: typography.sizes.label,
        fontFamily: typography.semibold,
        color: colors.textDark,
        marginBottom: 8,
    },

    caption: {
        fontSize: typography.sizes.caption,
        fontFamily: typography.regular,
        color: colors.gray500,
    },
});

// ============================================
// INPUT STYLES
// ============================================

export const baseInput = StyleSheet.create({
    container: {
        borderWidth: 2,
        borderColor: colors.gray200,
        borderRadius: 12,
        backgroundColor: colors.white,
        ...shadows.small,
    },

    containerFocused: {
        borderColor: colors.brandOrange1,
        ...shadows.medium,
    },

    input: {
        paddingVertical: 14,
        paddingHorizontal: 16,
        fontSize: 16,
        fontFamily: typography.regular,
        color: colors.textDark,
    },

    label: {
        fontSize: 16,
        fontFamily: typography.semibold,
        color: colors.textDark,
        marginBottom: 8,
    },
});

// ============================================
// BUTTON STYLES
// ============================================

export const baseButton = StyleSheet.create({
    wrapper: {
        borderRadius: 16,
        overflow: "hidden",
        ...shadows.button,
    },

    wrapperSmall: {
        borderRadius: 12,
        overflow: "hidden",
        ...shadows.button,
    },

    button: {
        paddingVertical: 18,
        alignItems: "center",
        justifyContent: "center",
    },

    buttonSmall: {
        paddingVertical: 15,
        alignItems: "center",
        justifyContent: "center",
    },

    text: {
        color: colors.white,
        fontFamily: typography.semibold,
        fontSize: typography.sizes.button,
        letterSpacing: 0.5,
    },

    textSmall: {
        color: colors.white,
        fontFamily: typography.semibold,
        fontSize: 16,
        letterSpacing: 0.5,
    },
});

// ============================================
// CARD/CONTAINER STYLES
// ============================================

export const baseContainer = StyleSheet.create({
    card: {
        backgroundColor: colors.white,
        borderRadius: 12,
        padding: 18,
        borderWidth: 1.5,
        borderColor: colors.gray200,
        ...shadows.medium,
    },

    cardSmall: {
        backgroundColor: colors.white,
        borderRadius: 10,
        padding: 12,
        borderWidth: 1.5,
        borderColor: colors.gray200,
        ...shadows.small,
    },
});

// ============================================
// SELECTION STYLES (for selectable items)
// ============================================

export const baseSelection = StyleSheet.create({
    item: {
        backgroundColor: colors.white,
        borderRadius: 10,
        paddingVertical: 12,
        paddingHorizontal: 10,
        borderWidth: 1.5,
        borderColor: colors.gray200,
        ...shadows.small,
    },

    itemSelected: {
        backgroundColor: colors.brandOrange1,
        borderColor: colors.brandOrange1,
    },

    itemText: {
        fontSize: 14,
        fontFamily: typography.regular,
        color: colors.textDark,
    },

    itemTextSelected: {
        fontFamily: typography.semibold,
        color: colors.white,
    },
});

// ============================================
// LAYOUT HELPERS
// ============================================

export const baseLayout = StyleSheet.create({
    centerWrapper: {
        alignItems: "center",
        justifyContent: "center",
    },

    row: {
        flexDirection: "row",
        alignItems: "center",
    },

    spaceBetween: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
});
