import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { colors } from '../lib/theme';

type Props = {
  days: number;
  size?: 'sm' | 'md' | 'lg';
};

const sizeMap = {
  sm: { number: 'text-2xl', label: 'text-xs', icon: 16, padding: 'px-3 py-2' },
  md: { number: 'text-5xl', label: 'text-sm', icon: 20, padding: 'px-5 py-4' },
  lg: { number: 'text-7xl', label: 'text-base', icon: 24, padding: 'px-6 py-5' },
};

export function StreakBadge({ days, size = 'md' }: Props) {
  const { t } = useTranslation();
  const s = sizeMap[size];
  return (
    <View className={`items-center bg-white border border-neutral-200 rounded-3xl ${s.padding}`}>
      <View className="flex-row items-center gap-2 mb-1">
        <Ionicons name="flame" size={s.icon} color={colors.brandOrange} />
        <Text className={`${s.number} text-neutral-900 tabular-nums`} style={{ fontFamily: 'Nunito_800ExtraBold' }}>{days}</Text>
      </View>
      <Text className={`${s.label} text-neutral-500 tracking-wide uppercase`} style={{ fontFamily: 'Nunito_600SemiBold' }}>
        {days === 1 ? t('streak.label_one') : t('streak.label_other')} {t('streak.label_suffix')}
      </Text>
    </View>
  );
}