import React from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { useTranslation } from 'react-i18next';
import { SerifText } from './SerifText';
import { OnboardingColors } from '@/constants/OnboardingTheme';

export const INTENTS = [
  { id: 'love', labelKey: 'intent.love', icon: '❤️' },
  { id: 'life', labelKey: 'intent.life', icon: '⛅' },
  { id: 'travel', labelKey: 'intent.travel', icon: '🌴' },
  { id: 'work', labelKey: 'intent.work', icon: '💼' },
];

interface IntentSelectionStepProps {
  selectedIds: string[];
  onToggle: (id: string) => void;
}

export function IntentSelectionStep({ selectedIds, onToggle }: IntentSelectionStepProps) {
  const { t } = useTranslation();
  return (
    <View style={styles.container}>
      <SerifText style={styles.title}>{t('intent.title')}</SerifText>
      
      <View style={styles.grid}>
        {INTENTS.map((intent) => {
          const isSelected = selectedIds.includes(intent.id);
          return (
            <TouchableOpacity
              key={intent.id}
              style={[
                styles.card,
                isSelected && styles.cardSelected
              ]}
              onPress={() => onToggle(intent.id)}
              activeOpacity={0.7}
            >
              <SerifText style={styles.icon}>{intent.icon}</SerifText>
              <SerifText style={[styles.label, isSelected && styles.labelSelected]}>
                {t(intent.labelKey)}
              </SerifText>
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    width: '100%',
  },
  title: {
    fontSize: 24,
    marginBottom: 40,
    textAlign: 'center',
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 16,
    justifyContent: 'center',
    width: '100%',
  },
  card: {
    width: '45%', // slightly less than half to accommodate gap
    aspectRatio: 1.2,
    backgroundColor: OnboardingColors.cardBackground,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 10,
    elevation: 2,
    borderWidth: 2,
    borderColor: 'transparent',
  },
  cardSelected: {
    borderColor: OnboardingColors.buttonEnd, // Use pink as highlight
    backgroundColor: '#FFFBF5',
  },
  icon: {
    fontSize: 32,
  },
  label: {
    fontSize: 18,
    color: OnboardingColors.textPrimary,
  },
  labelSelected: {
    fontWeight: 'bold',
  },
});