// Generated by GitHub Copilot
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { FoodItem } from '../services/api';
import { Colors } from '../theme/colors';
import { Spacing } from '../theme/spacing';

interface FoodRowProps {
  item: FoodItem;
  onSelect: (item: FoodItem) => void;
}

/**
 * Single food result row in the search screen.
 * REQ-MOB-006
 */
export default function FoodRow({ item, onSelect }: FoodRowProps) {
  return (
    <TouchableOpacity
      style={styles.row}
      onPress={() => onSelect(item)}
      accessibilityRole="button"
      accessibilityLabel={`${item.name}, ${item.caloriesPer100g} calories per 100 grams`}
    >
      <Text style={styles.name}>{item.name}</Text>
      <Text style={styles.kcal}>{item.caloriesPer100g} kcal / 100g</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  row: {
    minHeight: Spacing.touchTarget,
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
    borderBottomWidth: 1,
    borderBottomColor: Colors.gray100,
    justifyContent: 'center',
  },
  name: { fontSize: 16, fontWeight: '500', color: Colors.gray900 },
  kcal: { fontSize: 13, color: Colors.gray500, marginTop: 2 },
});