import { Text, ActivityIndicator, TouchableOpacity } from "react-native";
import React from "react";
import { commonStyles } from "../../styles/commonStyle";
import { styles } from "./styles";
import { appColors, fontSizes } from "@src/themes";
import { ButtonInterface } from "../type";
import { useValues } from "@src/utils/context";

export function Button({
  title,
  onPress,
  width,
  backgroundColor,
  textColor,
  loading,
}: ButtonInterface) {
  const widthNumber = width || "100%";

  const { isDark } = useValues();

  return (
    <TouchableOpacity
      activeOpacity={0.9}
      style={[
        styles.container,
        {
          width: widthNumber,
          backgroundColor: backgroundColor
            ? backgroundColor
            : isDark
            ? appColors.whiteColor
            : appColors.blackColor,
        },
      ]}
      onPress={onPress}
      disabled={loading}
    >
      {loading ? (
        <ActivityIndicator
          size="large"
          color={
            textColor
              ? textColor
              : isDark
              ? appColors.blackColor
              : appColors.whiteColor
          }
          style={styles.self}
        />
      ) : (
        <Text
          style={[
            commonStyles.mediumTextBlack,
            {
              color: textColor
                ? textColor
                : isDark
                ? appColors.blackColor
                : appColors.whiteColor,
              fontSize: fontSizes.FONT19,
            },
          ]}
        >
          {title}
        </Text>
      )}
    </TouchableOpacity>
  );
}
