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

const GradientButton = ({
  title = "",
  colors = ["#F94697", "#7023F7"],
  onPress,
  props,
  containerStyle = {},
  icon,
  disabled = false,
  maxWidth = null,
}) => {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={{
        ...containerStyle,
        opacity: disabled ? 0.6 : 1,
        maxWidth: maxWidth ? maxWidth : null,
      }}
    >
      <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,
            paddingHorizontal: 10,
          }}
        >
          {title}
        </Text>
      </LinearGradient>
    </Pressable>
  );
};

export default GradientButton;