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

const BlurItemButton = ({ onPress, title = "" }) => {
  return (
    <Pressable onPress={onPress}>
      <BlurView
        intensity={20}
        style={styles.buttonContainer}
        experimentalBlurMethod={
          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
        }
      >
        <Text style={styles.buttonText}>{title}</Text>
        <Image
          source={icons.chevronDown}
          style={{
            ...size({ size: 15 }),
            transform: [{ rotate: "-90deg" }],
          }}
          resizeMode="contain"
        />
      </BlurView>
    </Pressable>
  );
};

export default BlurItemButton;

const styles = StyleSheet.create({
  buttonContainer: {
    ...Style.containerSpaceBetween,
    paddingHorizontal: 12,
    height: 56,
    borderRadius: 14,
    overflow: "hidden",
    backgroundColor: Palette.glass,
  },
  buttonText: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
});
