import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { colors, fonts, spacing, borderRadius } from '../utils/theme';

/**
 * Ad placeholder component.
 *
 * In Expo Go: shows a subtle themed placeholder.
 * In production build: replace the content with real AdMob BannerAd.
 *
 * To enable real ads:
 * 1. Run: eas build --profile preview
 * 2. Uncomment the AdMob import below
 * 3. Replace placeholder with <BannerAd />
 */

// Uncomment for production build:
// import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
// const AD_UNIT = TestIds.BANNER;

export default function NovaAd({ style }) {
  return (
    <View style={[st.container, style]}>
      <View style={st.card}>
        <View style={st.labelRow}>
          <View style={st.labelDot} />
          <Text style={st.labelText}>Sponsored</Text>
        </View>
        <View style={st.placeholder}>
          <Text style={st.placeholderText}>Ad Space</Text>
        </View>
      </View>
    </View>
  );
}

const st = StyleSheet.create({
  container: {
    marginVertical: spacing.sm,
  },
  card: {
    backgroundColor: colors.surface,
    borderRadius: borderRadius.md,
    borderWidth: 1,
    borderColor: colors.border,
    overflow: 'hidden',
  },
  labelRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: spacing.sm,
    paddingTop: spacing.xs,
    paddingBottom: spacing.xs,
  },
  labelDot: {
    width: 4,
    height: 4,
    borderRadius: 2,
    backgroundColor: colors.textMuted,
    marginRight: spacing.xs,
  },
  labelText: {
    color: colors.textMuted,
    fontSize: 9,
    fontWeight: fonts.weights.medium,
  },
  placeholder: {
    height: 52,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(108,99,255,0.04)',
  },
  placeholderText: {
    color: colors.textMuted,
    fontSize: 10,
  },
});
