import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useThemeContext } from './ThemeProvider';
import { borderRadius, spacing } from '../constants/theme';
import { useTranslation } from '../src/i18n';

interface StockBadgeProps {
  stock: number;
}

export function StockBadge({ stock }: StockBadgeProps) {
  const { colors, isDark } = useThemeContext();
  const { t } = useTranslation();

  const getBadgeColors = () => {
    if (stock === 0) {
      return { bg: isDark ? '#3a1a1a' : '#feecec', text: isDark ? '#ef9a9a' : '#b91c1c' };
    }
    if (stock < 5) {
      return { bg: isDark ? '#3a3010' : '#fff3cd', text: isDark ? '#ffd54f' : '#FF9500' };
    }
    return { bg: isDark ? '#1a3a1c' : '#eaf7ec', text: isDark ? '#81c784' : '#34C759' };
  };

  const badgeColors = getBadgeColors();

  return (
    <View style={[styles.badge, { backgroundColor: badgeColors.bg }]}>
      <Text style={[styles.text, { color: badgeColors.text }]}>
        {stock === 0 ? t('stockBadge.outOfStock') : stock < 5 ? `${t('stockBadge.lowStock')} (${stock})` : `${t('stockBadge.inStock')} (${stock})`}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    borderRadius: borderRadius.sm,
  },
  text: {
    fontSize: 12,
    fontWeight: '600',
  },
});