import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import React from 'react';
import { GestureResponderEvent, StyleSheet, Text, TouchableOpacity } from 'react-native';

interface GlassButtonProps {
  title: string;
  onPress: (event: GestureResponderEvent) => void;
  style?: object;
  glassStyle?: 'regular' | 'clear';
  tintColor?: string;
}

export default function GlassButton({
  title,
  onPress,
  style = {},
  glassStyle = 'regular',
  tintColor = 'rgba(255, 255, 255, 0.3)',
}: GlassButtonProps) {
  const available = isLiquidGlassAvailable();

  if (available) {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
        <GlassView
          style={[styles.button, style]}
          glassEffectStyle={glassStyle}
          tintColor={tintColor}
          isInteractive={true}   // 如果需要点击反馈
        >
          <Text style={styles.buttonText}>{title}</Text>
        </GlassView>
      </TouchableOpacity>
    );
  } else {
    // fallback
    return (
      <TouchableOpacity
        onPress={onPress}
        style={[styles.button, style, styles.fallbackBackground]}
        activeOpacity={0.7}
      >
        <Text style={styles.buttonText}>{title}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',  // 保证玻璃边界圆角效果
  },
  fallbackBackground: {
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
  },
  buttonText: {
    fontSize: 16,
    color: '#000',
    fontWeight: '600',
  },
});