import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Image as ExpoImage } from 'expo-image';
import { Ionicons } from '@expo/vector-icons';
import { Colors } from '../../constants/theme';
import { Service } from '../../types';

interface Props {
  service: Service;
  onPress: (slug: string) => void;
}

export const ServiceCard: React.FC<Props> = ({ service, onPress }) => {
  return (
    <TouchableOpacity style={styles.container} onPress={() => onPress(service.slug)}>
      <View style={styles.imageContainer}>
        <ExpoImage source={{ uri: service.image_url || service.image }} style={styles.image} contentFit="cover" />
        <View style={styles.featuredBadge}>
          <Ionicons name="star" size={10} color="#fff" />
          <Text style={styles.featuredText}>Destaque</Text>
        </View>
      </View>
      
      <View style={styles.info}>
        <Text style={styles.name} numberOfLines={1}>{service.source_name}</Text>
        <Text style={styles.price}>{service.price}</Text>
        
        <View style={styles.footer}>
          <View style={styles.ratingRow}>
            <Ionicons name="star" size={12} color="#FFD700" />
            <Text style={styles.ratingText}>{service.rating || '5.0'}</Text>
          </View>
          <Text style={styles.views}>Visualizações: {Math.floor(Math.random() * 5000)}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: Colors.light.border,
    marginBottom: 15,
    overflow: 'hidden',
    width: '48%',
  },
  imageContainer: {
    height: 120,
    width: '100%',
  },
  image: {
    flex: 1,
  },
  featuredBadge: {
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: Colors.light.warning,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderBottomRightRadius: 8,
  },
  featuredText: {
    color: '#fff',
    fontSize: 10,
    fontWeight: 'bold',
    marginLeft: 2,
  },
  info: {
    padding: 8,
  },
  name: {
    fontSize: 14,
    fontWeight: 'bold',
    color: Colors.light.text,
  },
  price: {
    fontSize: 14,
    color: Colors.light.primary,
    fontWeight: 'bold',
    marginTop: 4,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 8,
    paddingTop: 8,
    borderTopWidth: 1,
    borderTopColor: '#f0f0f0',
  },
  ratingRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  ratingText: {
    fontSize: 10,
    color: Colors.light.text,
    marginLeft: 2,
  },
  views: {
    fontSize: 10,
    color: Colors.light.textMuted,
  },
});