managarten/memoro/apps/mobile/components/statistics/GlassCard.tsx

import React from 'react';
import { View, StyleSheet, ViewStyle } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { useTheme } from '~/features/theme/ThemeProvider';

interface GlassCardProps {
  children: React.ReactNode;
  style?: ViewStyle;
  width?: number | string;
}

/**
 * Glass morphism card component with blur effect and transparency
 */
const GlassCard: React.FC<GlassCardProps> = ({ children, style, width = '100%' }) => {
  const { isDark } = useTheme();

  // Glass effect colors
  const glassBackground = isDark
    ? 'rgba(255, 255, 255, 0.08)'
    : 'rgba(255, 255, 255, 0.7)';

  const borderColor = isDark
    ? 'rgba(255, 255, 255, 0.15)'
    : 'rgba(255, 255, 255, 0.3)';

  const gradientColors = isDark
    ? ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)']
    : ['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.6)'];

  return (
    <View style={[styles.container, { width }, style]}>
      <LinearGradient
        colors={gradientColors}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.gradient}
      >
        <View
          style={[
            styles.innerContainer,
            {
              backgroundColor: glassBackground,
              borderColor: borderColor,
            },
          ]}
        >
          {children}
        </View>
      </LinearGradient>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderRadius: 24,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.15,
    shadowRadius: 20,
    elevation: 8,
  },
  gradient: {
    flex: 1,
    borderRadius: 24,
  },
  innerContainer: {
    flex: 1,
    borderRadius: 24,
    borderWidth: 1,
    padding: 24,
  },
});

export default GlassCard;