import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Product } from '../types';

interface Props {
  product: Product;
  onAddToCart: (product: Product) => void;
}

export default function ProductCard({ product, onAddToCart }: Props) {
  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <Text style={styles.category}>{product.category.toUpperCase()}</Text>
        <Text style={styles.stock}>Stock: {product.stock}</Text>
      </View>
      <Text style={styles.name}>{product.name}</Text>
      {product.description ? <Text style={styles.desc}>{product.description}</Text> : null}
      <View style={styles.footer}>
        <Text style={styles.price}>₦{Number(product.price).toLocaleString()}</Text>
        <TouchableOpacity
          style={[styles.btn, product.stock === 0 && styles.disabled]}
          onPress={() => product.stock > 0 && onAddToCart(product)}
          disabled={product.stock === 0}
        >
          <Text style={styles.btnText}>{product.stock === 0 ? 'Out of Stock' : '+ Cart'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card:     { backgroundColor: '#1e293b', borderRadius: 14, padding: 16, marginBottom: 12 },
  header:   { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 },
  category: { fontSize: 11, color: '#f97316', fontWeight: '700' },
  stock:    { fontSize: 11, color: '#64748b' },
  name:     { fontSize: 16, fontWeight: '700', color: '#fff', marginBottom: 4 },
  desc:     { fontSize: 13, color: '#94a3b8', marginBottom: 10 },
  footer:   { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  price:    { fontSize: 18, fontWeight: '800', color: '#f97316' },
  btn:      { backgroundColor: '#f97316', borderRadius: 8, paddingHorizontal: 14, paddingVertical: 8 },
  disabled: { backgroundColor: '#334155' },
  btnText:  { color: '#fff', fontWeight: '700', fontSize: 13 },
});
