Product Card

---
/**
 * EcommerceProductCard — Commercial card with price, rating and action buttons.
 * 
 * @param {string} title - The product name.
 * @param {string} price - The parsed price string (e.g. "$299").
 * @param {string} imageUrl - The URL mapping to the product's thumbnail.
 * @param {string} tag - Optional. The highlight bubble tag (e.g. "New").
 * @param {string} rating - Optional. Formatted rating string.
 * @param {string} ctaText - Optional. Label for the call to action button. Default is "Add".
 */
interface Props {
  title: string;
  price: string;
  imageUrl?: string;
  tag?: string;
  rating?: string;
  ctaText?: string;
}

const { 
  title, 
  price, 
  imageUrl,
  tag,
  rating,
  ctaText = 'Add'
} = Astro.props;
---

<div class="prod-card">
  <div class="prod-card__image" style={imageUrl ? `background-image: url('${imageUrl}'); background-size: cover;` : ''}></div>
  <div class="prod-card__info">
    <div class="prod-card__meta">
      {tag ? <span>{tag}</span> : <span></span>}
      {rating ? <span>{rating}</span> : null}
    </div>
    <h4 class="prod-card__title">{title}</h4>
    <div class="prod-card__bot">
      <span class="prod-card__price">{price}</span>
      <button class="prod-card__cta" type="button">{ctaText}</button>
    </div>
  </div>
</div>

<style>
  .prod-card { 
    background: var(--c-bg-elev, #0f172a); 
    border-radius: var(--r-lg, 16px); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    overflow: hidden; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease; 
  }
  .prod-card:hover { 
    border-color: var(--c-primary, #6366f1); 
    transform: translateY(-3px); 
  }
  .prod-card__image { 
    height: 180px; 
    background-color: var(--c-bg, #1e293b); 
  }
  .prod-card__info { padding: var(--sp-5, 1.25rem); }
  .prod-card__meta { 
    display: flex; justify-content: space-between; 
    font-size: 0.75rem; color: var(--c-primary-light, #818cf8); 
    font-weight: 700; margin-bottom: 0.5rem; 
  }
  .prod-card__title { color: var(--c-text-1, #fff); margin: 0; font-size: 1.1rem; }
  .prod-card__bot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
  .prod-card__price { font-weight: 800; color: var(--c-text-1, #fff); font-size: 1.25rem; }
  .prod-card__cta { 
    background: var(--c-primary, #6366f1); border: none; color: #fff; 
    padding: 0.5rem 1.2rem; border-radius: var(--r-md, 8px); 
    font-weight: 600; cursor: pointer; transition: 0.2s;
  }
  .prod-card__cta:hover { filter: brightness(1.1); }
</style>