import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import '../styles/global.css'

export default function ProductCard({ product }) {
  const [imageError, setImageError] = useState(false)
  const price = product.discount_price || product.price
  const discount =
    product.discount_price && product.is_on_sale
      ? Math.round(
          ((product.price - product.discount_price) / product.price) * 100
        )
      : 0

  const fallbackImage = `https://via.placeholder.com/400x400?text=${encodeURIComponent(product.name)}`
  
  // Use main_image_url if set, otherwise use first image, otherwise use fallback
  const imageUrl = !imageError && product.main_image_url 
    ? product.main_image_url
    : (product.images && product.images.length > 0 && !imageError)
      ? product.images[0]
      : fallbackImage

  return (
    <Link to={`/product/${product.id}`} className="product-card-link">
      <div className="product-card">
        <div className="product-image-container">
          <img 
            src={imageUrl} 
            alt={product.name}
            onError={() => setImageError(true)}
          />
          {product.is_on_sale && discount > 0 && (
            <div className="discount-badge">{discount}% OFF</div>
          )}
          {product.is_featured && (
            <div className="featured-badge">FEATURED</div>
          )}
        </div>
        <div className="product-info">
          <h3>{product.name}</h3>
          <p className="brand">{product.brand}</p>
          <div className="price">
            {product.discount_price ? (
              <>
                <span className="original">₪{product.price.toFixed(2)}</span>
                <span className="discounted">₪{product.discount_price.toFixed(2)}</span>
              </>
            ) : (
              <span>₪{price.toFixed(2)}</span>
            )}
          </div>
          {product.stock !== null && (
            <p className="stock">
              {product.stock > 0 ? (
                <span className="in-stock">In Stock</span>
              ) : (
                <span className="out-of-stock">Out of Stock</span>
              )}
            </p>
          )}
        </div>
      </div>
    </Link>
  )
}