import React from 'react';
import { useNavigate } from 'react-router-dom';
import type { FoodItem } from '../types';
import { useCart } from '../contexts/CartContext';
import './ItemCard.css';

interface ItemCardProps {
  item: FoodItem;
  isLast?: boolean;
}

const ItemCard: React.FC<ItemCardProps> = ({ item, isLast }) => {
  const navigate = useNavigate();
  const { addToCart, updateQuantity, getItemQuantity } = useCart();
  const quantity = getItemQuantity(item.id);
  const isLimitReached = item.stock !== undefined && quantity >= item.stock && item.stock > 0;

  return (
    <div 
      className={`item-card ${isLast ? 'last' : ''} ${item.stock === 0 ? 'out-of-stock' : ''} ${isLimitReached ? 'limit-reached' : ''}`} 
      onClick={() => navigate(`/item/${item.id}`)}
    >
      <div className="item-info">
        <div className="item-labels">
          <div className={`veg-icon ${item.isVeg ? 'veg' : 'non-veg'}`}>
            <div className="dot" />
          </div>
          {item.isPopular && <span className="bestseller-badge">Popular</span>}
          {item.stock === 0 && <span className="out-of-stock-badge">Out of Stock</span>}
          {isLimitReached && <span className="limit-badge">Only {item.stock} left</span>}
        </div>
        
        <h3 className="item-name">{item.name}</h3>
        <p className="item-price">R{item.price.toFixed(2)}</p>
        
        <p className="item-description">{item.description}</p>
      </div>

      <div className="item-image-container" onClick={(e) => e.stopPropagation()}>
        {item.image ? (
          <img src={item.image} alt={item.name} className="item-image" />
        ) : (
          <div className="item-image-placeholder">
            <span className="placeholder-icon">🍲</span>
          </div>
        )}
        
        <div className="add-to-cart-container">
          {quantity === 0 ? (
            <button 
              className="add-button"
              onClick={() => addToCart(item)}
              disabled={item.stock === 0}
            >
              {item.stock === 0 ? 'SOLD OUT' : 'ADD'}
            </button>
          ) : (
            <div className={`quantity-controls ${isLimitReached ? 'at-limit' : ''}`}>
              <button onClick={() => updateQuantity(item.id, -1)}>−</button>
              <span className="quantity">{quantity}</span>
              <button 
                onClick={() => addToCart(item)}
                className={isLimitReached ? 'disabled' : ''}
              >+</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ItemCard;