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

const BorderGradientButton = ({
  title = "J’ai déjà mes paroles",
  onPress,
  icon,
  titleStyle,
  containerStyle = {},
  tint = "dark",
  disabled = false,
  maxWidth = null,
}) => {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={{
        maxWidth: maxWidth ? maxWidth : null,
        ...containerStyle,
        opacity: disabled ? 0.6 : 1,
      }}
    >
      <BorderGradient
        gradientProps={{
          colors: ["#F94697", "#7023F7"],
          start: { x: 0, y: 0 },
          end: { x: 1, y: 0 },
          locations: [0, 1],
        }}
        style={{
          height: 50,
          borderRadius: 14,
          borderWidth: 1,
          zIndex: 1,
        }}
      >
        <View
          style={{
            borderRadius: 14,
            overflow: "hidden",
            backgroundColor: "#73737324",
            width: "100%",
            height: "100%",
          }}
        >
          <BlurView
            intensity={40}
            tint={tint}
            style={{
              width: "100%",
              height: "100%",
              ...Style.containerCenter,
              ...Style.containerRow,
              borderRadius: 14,
              gap: 11,
            }}
          >
            {icon && <Image source={icon} style={size({ size: 16 })} />}
            <Text
              style={{
                fontSize: 15,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterMedium,
                ...titleStyle,
              }}
            >
              {title}
            </Text>
          </BlurView>
        </View>
      </BorderGradient>
    </Pressable>
  );
};

export default BorderGradientButton;