super-app/components/reusable/gradient-border/GradientBorder.tsx

import { View, ViewStyle } from "react-native";
import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
import { GradientBorderData } from "../../../App/common/interface/components/GradientBorderData";

const GradientBorder = ({
  gradientBorderData,
  children,
  style,
}: {
  gradientBorderData?: GradientBorderData;
  children?: React.ReactNode;
  style?: ViewStyle;
}) => {
  let data = gradientBorderData;
  let gradientColors = data?.gradientColors;
  let orientation = gradientBorderData?.orientation;
  let borderWidth = gradientBorderData?.borderWidth;
  let outerRadius = gradientBorderData?.borderRadius || 0;
  let innerRadius = Math.max(outerRadius - (borderWidth || 0), 0);

  return (
    <NaviLinearGradient
      gradientColors={gradientColors}
      orientation={orientation}
      style={
        [
          style,
          commonStyles.overflowHidden,
          {
            padding: borderWidth,
            borderRadius: outerRadius,
          },
        ] as ViewStyle
      }
    >
      <View
        style={[
          commonStyles.overflowHidden,
          {
            borderRadius: innerRadius,
          },
        ]}
      >
        {children}
      </View>
    </NaviLinearGradient>
  );
};

export default GradientBorder;