import { View, Text, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../../lib/theme';
import { RiveAvatar } from '../RiveAvatar';

type Props = {
  onDismiss?: () => void;
  onContribute?: () => void;
};

export function DigaMissionBanner({ onDismiss, onContribute }: Props) {
  const colors = useColors();
  return (
    <View
      style={{
        marginHorizontal: 16,
        marginTop: 16,
        backgroundColor: '#fffbeb',
        borderWidth: 1,
        borderColor: '#fde68a',
        borderRadius: 14,
        padding: 16,
      }}
    >
      <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 10 }}>
        <View style={{ marginTop: 2 }}>
          <RiveAvatar emotion="idle" size="sm" />
        </View>
        <View style={{ flex: 1 }}>
          <Text
            style={{
              fontSize: 13,
              color: '#854d0e',
              fontFamily: 'Nunito_700Bold',
            }}
          >
            30 Tage geschützt — danke
          </Text>
          <Text
            style={{
              marginTop: 4,
              fontSize: 12,
              color: '#92400e',
              fontFamily: 'Nunito_400Regular',
              lineHeight: 17,
            }}
          >
            Mit ein paar anonymen Angaben hilfst du uns, ReBreak gezielt
            weiterzuentwickeln. Freiwillig, anonym, jederzeit löschbar.
          </Text>

          <View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>
            <TouchableOpacity
              onPress={onContribute}
              activeOpacity={0.7}
            >
              <View style={{
                paddingHorizontal: 12,
                paddingVertical: 7,
                backgroundColor: '#854d0e',
                borderRadius: 8,
              }}>
                <Text
                  style={{
                    fontSize: 12,
                    color: '#ffffff',
                    fontFamily: 'Nunito_600SemiBold',
                  }}
                >
                  Beitragen
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={onDismiss}
              activeOpacity={0.7}
            >
              <View style={{
                paddingHorizontal: 12,
                paddingVertical: 7,
                borderRadius: 8,
              }}>
              <Text
                style={{
                  fontSize: 12,
                  color: '#92400e',
                  fontFamily: 'Nunito_600SemiBold',
                }}
              >
                Später
              </Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <TouchableOpacity
          onPress={onDismiss}
          hitSlop={8}
          activeOpacity={0.5}
        >
          <Ionicons name="close" size={16} color={colors.textMuted} />
        </TouchableOpacity>
      </View>
    </View>
  );
}