import { Text } from '@/aesthetics/Text';
import { IngredientChips } from '@/see-log/components/IngredientChips';
import { font, radius, shadows, spacing, useColors } from '@/aesthetics/styles';
import type { FoodRecommendation } from '@/types/foodlog';
import { Utensils } from 'lucide-react-native';
import { StyleSheet, View } from 'react-native';

type RecommendedFoodItemsProps = {
  items: FoodRecommendation[];
};

export function RecommendedFoodItems({ items }: RecommendedFoodItemsProps) {
  const c = useColors();
  return (
    <View style={styles.container}>
      {items.map((item, i) => (
        <View
          key={`${i}-${item.recommendedFoodName}`}
          style={[
            styles.card,
            shadows.sm,
            { backgroundColor: c.surface, borderColor: c.borderSubtle },
          ]}
        >
          <View style={[styles.icon, { backgroundColor: c.roseSubtle }]}>
            <Utensils size={16} color={c.rose} strokeWidth={1.5} />
          </View>
          <View style={styles.content}>
            <Text style={[styles.name, { color: c.text }]}>{item.recommendedFoodName}</Text>
            {item.ingredients.length > 0 && <IngredientChips ingredients={item.ingredients} />}
          </View>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: spacing.sm,
  },
  card: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    padding: spacing.md,
    borderRadius: radius.md,
    borderWidth: 1,
    gap: spacing.md,
  },
  icon: {
    width: 36,
    height: 36,
    borderRadius: radius.sm,
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    flex: 1,
    gap: spacing.sm,
  },
  name: {
    fontSize: font.md,
    fontWeight: '500',
  },
});