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 = {},
  height = null,
}) => {
  const resolvedSize = HEIGHT_BY_SIZE[size] ? size : 'medium'
  const buttonHeight = typeof height === 'number' ? height : HEIGHT_BY_SIZE[resolvedSize]
  const fontSize = FONT_SIZE_BY_SIZE[resolvedSize]

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={[
        {
          opacity: disabled ? 0.6 : 1,
          maxWidth: maxWidth ? maxWidth : null,
          height: buttonHeight,
        },
        containerStyle,
      ]}
    >
      <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