import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { colors, borderRadius, spacing } from '../constants/theme';

interface StockBadgeProps {
  stock: number;
}

export function StockBadge({ stock }: StockBadgeProps) {
  const getBadgeStyle = () => {
    if (stock === 0) return styles.danger;
    if (stock < 5) return styles.warning;
    return styles.success;
  };

  const getText = () => {
    if (stock === 0) return 'Sin stock';
    if (stock < 5) return `Bajo (${stock})`;
    return `Disponible (${stock})`;
  };

  return (
    <View style={[styles.badge, getBadgeStyle()]}>
      <Text style={styles.text}>{getText()}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    borderRadius: borderRadius.sm,
  },
  success: {
    backgroundColor: '#D4EDDA',
  },
  warning: {
    backgroundColor: '#FFF3CD',
  },
  danger: {
    backgroundColor: '#F8D7DA',
  },
  text: {
    fontSize: 12,
    fontWeight: '600',
  },
});