import { useTranslations } from "@/providers/TranslationProviders";
import { useThemeColorStore } from "@/stores/theme-color";
import { ActivityIndicator, Pressable, Text, View } from "react-native";

export default function Button({
  onPress,
  className = "",
  isLoading = false,
  text,
  type = "primary",
  size = "md",
  disabled = false,
  fullWidth = true,
  leftIcon,
  rightIcon,
}: {
  onPress: () => void;
  className?: string;
  isLoading?: boolean;
  text?: string;
  type?: "primary" | "secondary" | "danger";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  fullWidth?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}) {
  const { primaryColor } = useThemeColorStore();
  const { tran } = useTranslations();

  const isSecondary = type === "secondary";
  const textColor = isSecondary ? "text-slate-800" : "text-white";
  const spinnerColor = isSecondary ? "#1e293b" : "white";

  const sizeClasses = {
    sm: "py-2 px-3",
    md: "py-3.5 px-5",
    lg: "py-4.5 px-6",
  };

  const textSizes = {
    sm: "text-xs",
    md: "text-base",
    lg: "text-lg",
  };

  return (
    <Pressable
      onPress={isLoading ? undefined : onPress}
      disabled={isLoading || disabled}
      className={`${className} rounded-xl flex-row items-center justify-center border ${
        isSecondary ? "border-slate-200" : "border-transparent"
      } ${sizeClasses[size]}`}
      style={{
        backgroundColor:
          type === "primary"
            ? primaryColor
            : type === "danger"
              ? "#dc2626"
              : "white",
        opacity: isLoading || disabled ? 0.5 : 1,
        alignSelf: fullWidth ? "auto" : "flex-start",
      }}
    >
      {isLoading ? (
        <View className={`items-center justify-center gap-x-2 flex-row ${fullWidth ? "flex-1" : ""}`}>
          <ActivityIndicator size="small" color={spinnerColor} />
          <Text className={`font-manrope-bold ${textColor} ${textSizes[size]}`}>{tran("Loading")}</Text>
        </View>
      ) : (
        <View pointerEvents="none" className={`flex-row items-center justify-center gap-x-2 ${fullWidth ? "flex-1" : ""}`}>
          {leftIcon && <View>{leftIcon}</View>}
          {text ? (
            <Text
              className={`font-manrope-bold text-center ${textSizes[size]} ${textColor}`}
            >
              {tran(text)}
            </Text>
          ) : null}
          {rightIcon && <View>{rightIcon}</View>}
        </View>
      )}
    </Pressable>
  );
}
