/* global React */
function ProductCard({ name, desc, price, uvp, badges = [], img = 'cat-Hygiene.png' }) {
  const save = uvp ? Math.round((1 - price / uvp) * 100) : null;
  const isAbsolute = typeof img === 'string' && (
    img.startsWith('data:') ||
    img.startsWith('http') ||
    img.startsWith('/') ||
    img.startsWith('assets/') ||
    img.startsWith('uploads/')
  );
  const imgSrc = isAbsolute ? img : `assets/${img}`;
  return (
    <article className="dp-product">
      <div className="dp-product__media">
        <img src={imgSrc} alt={name} />
      </div>
      <div className="dp-product__body">
        {badges.length > 0 && (
          <div className="dp-product__badges">
            {badges.map((b, i) => <span key={i} className={`dp-badge dp-badge--${b.kind}`}>{b.label}</span>)}
          </div>
        )}
        <div className="dp-product__name">{name}</div>
        <div className="dp-product__desc">{desc}</div>
        <div className="dp-product__price-row">
          <span className="dp-product__price">{price.toFixed(2).replace('.', ',')} €</span>
          {uvp && <span className="dp-product__uvp">{uvp.toFixed(2).replace('.', ',')} €</span>}
          {save && <span className="dp-product__save">−{save}%</span>}
        </div>
      </div>
    </article>
  );
}
window.ProductCard = ProductCard;