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

export const ProviderCard: React.FC<ProviderCardProps> = ({
  imageUrl,
  name,
  rating,
  deliveryTime,
  tag,
  discountText,
  onPress,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      activeOpacity={0.8}
    >
      <View style={styles.image}>
        <Text style={styles.imagePlaceholder}>{imageUrl || '🍽️'}</Text>
      </View>
      <View style={styles.info}>
        <Text style={styles.name} numberOfLines={1}>{name}</Text>
        <View style={styles.row}>
          <Text style={styles.rating}>⭐ {rating.toFixed(1)}</Text>
          <Text style={styles.deliveryTime}>🕐 {deliveryTime}</Text>
        </View>
        <Text style={styles.tag}>{tag}</Text>
        {discountText && (
          <View style={styles.discountBadge}>
            <Text style={styles.discountText}>{discountText}</Text>
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};