import { View, Text, StyleSheet, Platform } from "react-native";
import React, { useState } from "react";
import BorderGradient from "../BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Style } from "../../styles";

const ItemContainer = ({
  height = responsiveHeight(40),
  children,
  gradientProps,
  style,
}) => {
  const [containerLayout, setContainerLayout] = useState(null);

  return (
    <View
      style={{
        ...styles.blurContainer,
      }}
    >
      <BorderGradient
        gradientProps={{
          colors: ["rgba(72, 51, 51, 0)", "#FFFFFF"],
          start: { x: 0.3, y: 0 },
          end: { x: 1, y: 1 },
          locations: [0, 1],
          ...gradientProps,
        }}
        style={{
          ...styles.borderGradientStyle,
          height: containerLayout?.height,
          ...style,
        }}
      />
      <View
        style={{
          height,
          ...Style.containerCenter,
          borderRadius: 24,
          overflow: "hidden",
          zIndex: 1,
        }}
        onLayout={(e) => {
          setContainerLayout(e.nativeEvent.layout);
        }}
      >
        <BlurView
          intensity={40}
          tint="dark"
          style={{
            padding: 6,
            zIndex: 2,
            width: "99.2%",
            alignSelf: "center",
            height: "99.2%",
          }}
          experimentalBlurMethod={
            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
          }
        >
          {children}
        </BlurView>
      </View>
    </View>
  );
};

export default ItemContainer;

const styles = StyleSheet.create({
  borderGradientStyle: {
    borderWidth: 1,
    borderRadius: 20,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 100,
    position: "absolute",
    width: "100%",
  },
});
