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

const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress }) => {
  return (
    <Pressable onPress={onPress}>
      <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="dark"
            style={{
              width: "100%",
              height: "100%",
              ...Style.containerCenter,
              borderRadius: 14,
            }}
          >
            <Text
              style={{
                fontSize: 15,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterMedium,
              }}
            >
              {title}
            </Text>
          </BlurView>
        </View>
      </BorderGradient>
    </Pressable>
  );
};

export default BorderGradientButton;