import { View, Text, Pressable, Image } from "react-native";
import React from "react";
import { LinearGradient } from "./LinearGradient/LinearGradient";
import { Palette, Style } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { size } from "../styles/Style";

const GradientButton = ({
  title = "",
  colors = ["#F94697", "#7023F7"],
  onPress,
  props,
  containerStyle = {},
  icon,
  disabled = false,
}) => {
  return (
    <Pressable onPress={onPress} disabled={disabled} style={{ ...containerStyle, opacity: disabled ? 0.6 : 1 }}>
      <LinearGradient
        colors={colors}
        style={{
          ...Style.containerCenter,
          ...Style.containerRow,
          height: 50,
          borderRadius: 14,
          gap: 10,
        }}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        {...props}
      >
        {icon && <Image source={icon} style={size({ size: 16 })} />}
        <Text
          style={{
            fontSize: 15,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterMedium,
          }}
        >
          {title}
        </Text>
      </LinearGradient>
    </Pressable>
  );
};

export default GradientButton;
