import React from "react";
import {
    Text,
    Pressable,
    StyleSheet,
    ViewStyle,
    TextStyle,
} from "react-native";
import {Palette} from "@/constants/palette";
import { FunnelSans } from "@/constants/fonts";
import { Radius, Spacing } from "@/constants/styles";

type ButtonVariant = "primary" | "secondary";

interface ButtonProps {
    variant?: ButtonVariant;
    title: string;
    style?: ViewStyle;
    textStyle?: TextStyle;
    onPress?: () => void;
    disabled?: boolean;
}

// 👉 Variant styles (scalable)
const variantStyles = {
    primary: {
        container: {
            backgroundColor: Palette.black,
            borderColor: Palette.transparent,
        },
        text: {
            color: Palette.white,
        },
    },
    secondary: {
        container: {
            backgroundColor: Palette.transparent,
            borderColor: Palette.black,
        },
        text: {
            color: Palette.white,
        },
    },
};

export const Button: React.FC<ButtonProps> = ({
                                                  variant = "primary",
                                                  title,
                                                  style,
                                                  textStyle,
                                                  onPress,
                                                  disabled = false,
                                              }) => {
    const currentVariant = variantStyles[variant];

    return (
        <Pressable
            onPress={onPress}
            disabled={disabled}
            style={[
                styles.base,
                currentVariant.container,
                disabled && styles.disabled,
                style,
            ]}
        >
            <Text
                style={[
                    styles.text,
                    currentVariant.text,
                    textStyle,
                ]}
            >
                {title}
            </Text>
        </Pressable>
    );
};

export default Button;

const styles = StyleSheet.create({
    base: {
        paddingVertical: 10,
        paddingHorizontal: Spacing.md,
        borderRadius: Radius.md,
        alignItems: "center",
        justifyContent: "center",
        borderWidth: 1,
    },
    text: {
        ...FunnelSans.medium16,
    },
    disabled: {
        opacity: 0.5,
    },
});