import { StyleSheet, View } from 'react-native';
import { Text } from '@/aesthetics/Text';
import { font, radius, spacing, useColors } from '@/aesthetics/styles';

type IngredientChipsProps = {
  ingredients: string[];
  limit?: number;
};

export function IngredientChips({ ingredients, limit }: IngredientChipsProps) {
  const c = useColors();
  const displayIngredients = limit ? ingredients.slice(0, limit) : ingredients;
  const hasMore = limit && ingredients.length > limit;

  return (
    <View style={styles.list}>
      {displayIngredients.map((ing, i) => (
        <View key={`${i}-${ing}`} style={[styles.chip, { backgroundColor: c.tagBg }]}>
          <Text style={[styles.chipText, { color: c.secondaryText }]}>{ing}</Text>
        </View>
      ))}
      {hasMore && (
        <View style={[styles.chip, { backgroundColor: c.tagBg }]}>
          <Text style={[styles.chipText, { color: c.tertiaryText }]}>
            +{ingredients.length - limit}
          </Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  list: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: spacing.xs,
  },
  chip: {
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    borderRadius: radius.pill,
  },
  chipText: {
    fontSize: font.xs,
  },
});