import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import { useRouter } from 'expo-router';
import { ChevronRight } from 'lucide-react-native';
import COLORS from '@/constants/colors';

interface ProductCardProps {
  id: string;
  productName: string;
  image: string;
  description: string;
  price: string;
  inStock?: boolean;
}

export default function ProductCard({
  id,
  productName,
  image,
  description,
  price,
  inStock = true,
}: ProductCardProps) {
  const router = useRouter();


  return (
    <TouchableOpacity
      style={styles.card}
      onPress={() =>
        router.push({
          pathname: '/screens/user/ProductDetailsScreen', 
          params: { productId: id },
        })
      }
    >
      <Image
        source={{ uri: image }}
        style={styles.image}
        resizeMode="cover"
        onError={(error) => console.log('Image loading error:', error.nativeEvent.error)}
      />
      
      <View style={styles.content}>
        <View>
          
          <Text style={styles.title}>{productName}</Text>
          <Text style={styles.blend}>
            {description}
          </Text>
        </View>
        <View style={styles.rightContent}>
          <ChevronRight size={20} color="#666" />
          <Text style={[styles.stock, { color: inStock ? '#22C55E' : '#EF4444' }]}>
            {inStock ? 'En Stock' : 'Hors Stock'}
          </Text>
          <View style={styles.priceContainer}>
            <Text style={styles.price}>{price}</Text>
            <Text style={styles.unit}>TND/kg</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: COLORS.secondary,
    borderRadius: 12,
    marginBottom: 14,
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 5,
  },
  image: {
    width: 75,
    height: 120,
    borderRadius: 8,
    backgroundColor: '#eee', 
  },
  content: {
    flex: 1,
    marginLeft: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title: {
    fontSize: 17,
    fontWeight: '700',
    color: '#000',
    marginBottom: 4,
  },
  blend: {
    fontSize: 12,
    color: '#666',
  },
  rightContent: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    height: 110,
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'baseline',
  },
  price: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  unit: {
    fontSize: 14,
    fontWeight: '600',
    color: '#000',
    marginLeft: 3,
  },
  stock: {
    fontSize: 12,
  },
});