import type { Product } from '../entities';

interface ProductCardProps {
  product: Product;
}

/**
 * Product card component for displaying product information in lists
 * Follows hexagonal architecture - pure presentation component
 */
export function ProductCard({ product }: ProductCardProps) {
  const primaryImage =
    product.images.find((img) => img.isPrimary) || product.images[0];
  const isInStock = product.inventory.isInStock;
  const isLowStock =
    product.inventory.quantity <= product.inventory.lowStockThreshold;

  const handleAddToCart = () => {
    // This will be connected to cart service later
    console.log('Adding to cart:', product.id);
  };

  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <a href={`/products/${product.id}`}>
        <div className="relative">
          <img
            src={primaryImage?.url || '/placeholder-product.jpg'}
            alt={primaryImage?.alt || product.name}
            className="w-full h-48 object-cover"
          />
          {!isInStock && (
            <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
              <span className="text-white font-semibold">Out of Stock</span>
            </div>
          )}
          {isLowStock && isInStock && (
            <div className="absolute top-2 right-2 bg-orange-500 text-white px-2 py-1 text-xs rounded">
              Low Stock
            </div>
          )}
          {product.isFeatured && (
            <div className="absolute top-2 left-2 bg-blue-600 text-white px-2 py-1 text-xs rounded">
              Featured
            </div>
          )}
        </div>

        <div className="p-4">
          <h3 className="font-semibold text-gray-900 mb-2 line-clamp-2">
            {product.name}
          </h3>

          <div className="flex items-center justify-between mb-2">
            <span className="text-sm text-gray-600">{product.brand}</span>
            <span className="text-sm text-gray-500">
              {product.category.name}
            </span>
          </div>

          <p className="text-gray-600 text-sm mb-3 line-clamp-2">
            {product.description}
          </p>

          <div className="flex items-center justify-between">
            <div>
              <span className="text-2xl font-bold text-gray-900">
                {product.currency === 'USD' && '$'}
                {product.currency === 'EUR' && '€'}
                {product.currency === 'GBP' && '£'}
                {product.price.toFixed(2)}
              </span>
              <span className="text-sm text-gray-500 ml-1">
                {product.currency}
              </span>
            </div>

            <button
              onClick={handleAddToCart}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
                isInStock
                  ? 'bg-blue-600 text-white hover:bg-blue-700'
                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
              }`}
              disabled={!isInStock}
            >
              {isInStock ? 'Add to Cart' : 'Out of Stock'}
            </button>
          </div>

          {product.specifications.length > 0 && (
            <div className="mt-3 pt-3 border-t border-gray-200">
              <div className="flex flex-wrap gap-1">
                {product.specifications.slice(0, 3).map((spec, index) => (
                  <span
                    key={index}
                    className="inline-block bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded"
                  >
                    {spec.name}: {spec.value}
                    {spec.unit && ` ${spec.unit}`}
                  </span>
                ))}
                {product.specifications.length > 3 && (
                  <span className="text-xs text-gray-500">
                    +{product.specifications.length - 3} more
                  </span>
                )}
              </div>
            </div>
          )}
        </div>
      </a>
    </div>
  );
}