import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';

interface MembershipBannerProps {
  onPress: () => void;
}

export const MembershipBanner: React.FC<MembershipBannerProps> = ({ onPress }) => {
  const { t } = useTranslation();

  return (
    <View style={styles.container}>
      <TouchableOpacity
        activeOpacity={0.9}
        onPress={onPress}
        style={styles.touchable}
      >
        <LinearGradient
          colors={['#4C3AFF', '#8D5BEA']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.gradient}
        >
          {/* Decorative Elements */}
          <View style={styles.decorationCircleLarge} />
          <View style={styles.decorationCircleSmall} />
          
          <View style={styles.contentContainer}>
            <View style={styles.textContainer}>
              <View style={styles.badgeContainer}>
                 <Ionicons name="crown" size={10} color="#FFD700" style={styles.badgeIcon} />
                 <Text style={styles.badgeText}>PRO</Text>
              </View>
              <Text style={styles.title}>
                {t('personal.membershipBanner.title', 'Unlock Premium Access')}
              </Text>
              <Text style={styles.subtitle} numberOfLines={1}>
                {t('personal.membershipBanner.subtitle', 'Get unlimited access to all features')}
              </Text>
              
              <View style={styles.ctaButton}>
                <Text style={styles.ctaText}>{t('personal.membershipBanner.cta', 'Upgrade')}</Text>
                <Ionicons name="arrow-forward" size={12} color="#4C3AFF" />
              </View>
            </View>

            <View style={styles.illustrationContainer}>
               {/* Use Ionicons as illustration or you can use Image if passed as prop */}
               <Ionicons name="diamond-outline" size={56} color="rgba(255,255,255,0.15)" />
            </View>
          </View>
        </LinearGradient>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
    borderRadius: 16,
    // Premium Shadow
    shadowColor: '#4C3AFF',
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.15,
    shadowRadius: 12,
    elevation: 6,
    marginHorizontal: 4, // Add margin to avoid cutting off shadow
  },
  touchable: {
    borderRadius: 16,
    overflow: 'hidden',
  },
  gradient: {
    padding: 16,
    minHeight: 100,
    position: 'relative',
    justifyContent: 'center',
  },
  decorationCircleLarge: {
    position: 'absolute',
    top: -40,
    right: -40,
    width: 160,
    height: 160,
    borderRadius: 80,
    backgroundColor: 'rgba(255,255,255,0.08)',
  },
  decorationCircleSmall: {
    position: 'absolute',
    bottom: -30,
    left: -30,
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: 'rgba(255,255,255,0.05)',
  },
  contentContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    zIndex: 1,
  },
  textContainer: {
    flex: 1,
    paddingRight: 12,
    zIndex: 2,
  },
  badgeContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(255,255,255,0.2)',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 8,
    alignSelf: 'flex-start',
    marginBottom: 8,
    borderWidth: 0.5,
    borderColor: 'rgba(255,255,255,0.3)',
  },
  badgeIcon: {
    marginRight: 3,
  },
  badgeText: {
    color: '#FFD700',
    fontSize: 9,
    fontWeight: '800',
    letterSpacing: 0.5,
    fontFamily: 'AliBold',
  },
  title: {
    fontSize: 16,
    fontWeight: '700',
    color: '#FFFFFF',
    marginBottom: 4,
    fontFamily: 'AliBold',
    lineHeight: 20,
  },
  subtitle: {
    fontSize: 11,
    color: 'rgba(255,255,255,0.9)',
    marginBottom: 12,
    lineHeight: 14,
    fontFamily: 'AliRegular',
  },
  ctaButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 14,
    alignSelf: 'flex-start',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  ctaText: {
    color: '#4C3AFF',
    fontSize: 11,
    fontWeight: '700',
    marginRight: 4,
    fontFamily: 'AliBold',
  },
  illustrationContainer: {
    position: 'absolute',
    right: -6,
    bottom: -6,
    zIndex: 1,
    transform: [{ rotate: '-15deg' }]
  }
});