import React from 'react';
import { BlurView } from 'expo-blur';
import { View, StyleSheet, ViewStyle, Platform } from 'react-native';
import { Theme } from '../constants/theme';
import { useAppTheme } from '../context/ThemeContext';

interface GlassViewProps {
  children: React.ReactNode;
  style?: ViewStyle;
  intensity?: number;
}

export const GlassView: React.FC<GlassViewProps> = ({ children, style, intensity = 20 }) => {
  const { isDark, colors } = useAppTheme();

  return (
    <View style={[
      styles.container, 
      { backgroundColor: colors.glass, borderColor: colors.border },
      style
    ]}>
      {Platform.OS !== 'android' ? (
        <BlurView 
          intensity={intensity} 
          tint={isDark ? 'dark' : 'light'} 
          style={StyleSheet.absoluteFill} 
        />
      ) : null}
      {children}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderRadius: Theme.radius.lg,
    overflow: 'hidden',
    borderWidth: 1,
  },
});