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

export default function ProductCard({ product }) {
  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

  return (
    <div className="product-card">
      <div className="product-image-container">
        <img src={product.images[0]} alt={product.name} />
        {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>
        <p className="stock">
          {product.stock > 0 ? (
            <span className="in-stock">In Stock</span>
          ) : (
            <span className="out-of-stock">Out of Stock</span>
          )}
        </p>
        <Link to={`/product/${product.id}`} className="btn btn-small">
          View Details
        </Link>
      </div>
    </div>
  )
}