import { Pressable, Text, ActivityIndicator, type ViewStyle } from "react-native";
import { useTheme } from "../theme";

type Variant = "primary" | "secondary" | "outline" | "destructive";

interface ButtonProps {
  variant?: Variant;
  loading?: boolean;
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  onPress?: () => void;
  children: React.ReactNode;
  style?: ViewStyle;
}

export function Button({
  variant = "primary",
  loading = false,
  size = "md",
  disabled = false,
  children,
  style,
  onPress,
}: ButtonProps) {
  const theme = useTheme();

  const sizeStyles: Record<string, ViewStyle> = {
    sm: { paddingVertical: theme.spacing.sm, paddingHorizontal: theme.spacing.md, borderRadius: theme.radius.sm },
    md: { paddingVertical: 12, paddingHorizontal: theme.spacing.lg, borderRadius: theme.radius.md },
    lg: { paddingVertical: 16, paddingHorizontal: theme.spacing.xl, borderRadius: theme.radius.md },
  };

  const variantStyles: Record<Variant, ViewStyle> = {
    primary: { backgroundColor: theme.colors.primary },
    secondary: { backgroundColor: theme.colors.secondary },
    outline: { backgroundColor: "transparent", borderWidth: 1, borderColor: theme.colors.primary },
    destructive: { backgroundColor: theme.colors.error },
  };

  const textColors: Record<Variant, string> = {
    primary: "#FFFFFF",
    secondary: "#FFFFFF",
    outline: theme.colors.primary,
    destructive: "#FFFFFF",
  };

  return (
    <Pressable
      disabled={disabled || loading}
      onPress={onPress}
      style={[
        { alignItems: "center", justifyContent: "center" },
        sizeStyles[size],
        variantStyles[variant],
        disabled && { opacity: 0.5 },
        style,
      ]}
    >
      {loading ? (
        <ActivityIndicator color={variant === "outline" ? theme.colors.primary : "#FFFFFF"} size="small" />
      ) : typeof children === "string" ? (
        <Text style={{ color: textColors[variant], fontWeight: "600", fontSize: size === "sm" ? 14 : 16 }}>
          {children}
        </Text>
      ) : (
        children
      )}
    </Pressable>
  );
}