import React from "react";
import "../styles/Product.css";

export default function ProductCard({ product }) {
  // Strip HTML tags from description
  const plainTextDescription = product.description
    ? product.description.replace(/<[^>]*>/g, '').trim()
    : "";

  return (
    <div className="product-card">
      {/* Image Box */}
      <div className="image-box">
        <img src={product.image} alt={product.name} />
      </div>

      {/* Content */}
      <div className="card-body">
        <h3>{product.name}</h3>
        <p>{plainTextDescription}</p>
      </div>

      {/* Hover Overlay */}
      <div className="hover-overlay">
        <button>View Details</button>
      </div>
    </div>
  );
}
