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 HEIGHT_BY_SIZE = {
  small: 44,
  medium: 50,
  large: 58,
};

const FONT_SIZE_BY_SIZE = {
  small: 14,
  medium: 15,
  large: 17,
};

const GradientButton = ({
  title = "",
  colors = ["#F94697", "#7023F7"],
  onPress,
  props,
  containerStyle = {},
  icon,
  disabled = false,
  maxWidth = null,
  size = "medium",
  textStyle = {},
  gradientStyle = {},
}) => {
  const resolvedSize = HEIGHT_BY_SIZE[size] ? size : "medium";
  const buttonHeight = HEIGHT_BY_SIZE[resolvedSize];
  const fontSize = FONT_SIZE_BY_SIZE[resolvedSize];

  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: buttonHeight,
          borderRadius: 14,
          gap: 10,
          ...gradientStyle,
        }}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        {...props}
      >
        {icon && <Image source={icon} style={size({ size: 16 })} />}
        <Text
          style={{
            fontSize,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterMedium,
            paddingHorizontal: 10,
            ...textStyle,
          }}
        >
          {title}
        </Text>
      </LinearGradient>
    </Pressable>
  );
};

export default GradientButton;