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 RotationBorder from "./RotationBorder/RotationBorder";

const BorderGradientButton = ({
  title = "J’ai déjà mes paroles",
  onPress,
  icon,
  titleStyle,
  containerStyle = {},
  tint = "dark",
  disabled = false,
  maxWidth = null,
}) => {
  const pressableStyle = {
    ...(maxWidth ? { maxWidth } : {}),
    ...containerStyle,
    opacity: disabled ? 0.6 : 1,
  };

  return (
    <Pressable onPress={onPress} disabled={disabled} style={pressableStyle}>
      <RotationBorder
        borderWidth={2}
        borderRadius={14}
        colors={["#F94697", "#7023F7"]}
        style={{
          height: 50,
          width: "100%",
          zIndex: 1,
        }}
      >
        <View
          style={{
            borderRadius: 14,
            overflow: "hidden",
            backgroundColor: "#000000b8",
            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>
      </RotationBorder>
    </Pressable>
  );
};

export default BorderGradientButton;