import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { CatalogItemRowProps } from './catalogItemRow.props';
import { getStyles } from './catalogItemRow.styles';
import { useAppTheme } from '@theme';

export const CatalogItemRow: React.FC<CatalogItemRowProps> = ({
  imageUrl,
  title,
  description,
  price,
  quantity,
  onAdd,
  onRemove,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      <View style={styles.image}>
        <Text style={styles.imagePlaceholder}>{imageUrl || '🍕'}</Text>
      </View>
      <View style={styles.info}>
        <Text style={styles.title} numberOfLines={1}>{title}</Text>
        <Text style={styles.description} numberOfLines={2}>{description}</Text>
        <Text style={styles.price}>₹{price}</Text>
      </View>
      <View style={styles.actions}>
        {quantity > 0 ? (
          <>
            <TouchableOpacity
              style={[styles.stepperButton, quantity === 0 && styles.stepperButtonDisabled]}
              onPress={onRemove}
              activeOpacity={0.7}
            >
              <Text style={styles.stepperButtonText}>-</Text>
            </TouchableOpacity>
            <Text style={styles.quantity}>{quantity}</Text>
            <TouchableOpacity
              style={styles.stepperButton}
              onPress={onAdd}
              activeOpacity={0.7}
            >
              <Text style={styles.stepperButtonText}>+</Text>
            </TouchableOpacity>
          </>
        ) : (
          <TouchableOpacity
            style={styles.stepperButton}
            onPress={onAdd}
            activeOpacity={0.7}
          >
            <Text style={styles.stepperButtonText}>+</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};