import React, { useState } from 'react';
import { View, Text, Image, 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);
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      activeOpacity={0.85}
    >
      <View style={styles.imageWrap}>
        {imageUrl ? (
          <Image
            source={{ uri: imageUrl }}
            style={styles.image}
            resizeMode="cover"
          />
        ) : (
          <View style={styles.imagePlaceholder}>
            <Text style={styles.imagePlaceholderEmoji}>🍽️</Text>
          </View>
        )}

        {!!discountText && (
          <View style={styles.discountRibbon}>
            <Text style={styles.discountRibbonText}>{discountText}</Text>
          </View>
        )}

        <TouchableOpacity
          style={styles.favoriteButton}
          activeOpacity={0.7}
          onPress={() => setIsFavorite(prev => !prev)}
        >
          <Text style={styles.favoriteIcon}>{isFavorite ? '❤️' : '🤍'}</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.body}>
        <View style={styles.topRow}>
          <Text style={styles.name} numberOfLines={1}>
            {name}
          </Text>
          <View style={styles.ratingPill}>
            <Text style={styles.ratingStar}>⭐</Text>
            <Text style={styles.ratingText}>{rating.toFixed(1)}</Text>
          </View>
        </View>

        <View style={styles.metaRow}>
          <Text style={styles.metaText}>🕐 {deliveryTime}</Text>
          <View style={styles.metaDivider} />
          <Text style={styles.metaText}>{tag}</Text>
        </View>

        <View style={styles.tagPill}>
          <Text style={styles.tagPillText}>Free delivery over ₹199</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};