import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useColors } 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 colors = useColors();
  const s = sizeMap[size];
  return (
    <View
      className={`items-center rounded-3xl ${s.padding}`}
      style={{ backgroundColor: colors.bg, borderWidth: 1, borderColor: colors.border }}
    >
      <View className="flex-row items-center gap-2 mb-1">
        <Ionicons name="flame" size={s.icon} color={colors.brandOrange} />
        <Text className={`${s.number} tabular-nums`} style={{ fontFamily: 'Nunito_800ExtraBold', color: colors.text }}>{days}</Text>
      </View>
      <Text className={`${s.label} tracking-wide uppercase`} style={{ fontFamily: 'Nunito_600SemiBold', color: colors.textMuted }}>
        {days === 1 ? t('streak.label_one') : t('streak.label_other')} {t('streak.label_suffix')}
      </Text>
    </View>
  );
}
