<div class="menu-card">
  <div class="menu-img" [style.background]="getGradient()">
    <div class="menu-badge" *ngIf="menuItem.badge">{{ menuItem.badge }}</div>
  </div>
  <div class="menu-info">
    <div class="menu-name">
      <h3>{{ menuItem.name }}</h3>
      <div class="menu-price">¥{{ menuItem.price }}</div>
    </div>
    <div class="menu-desc">{{ menuItem.description }}</div>
    <div class="menu-stats">
      <span><fa-icon [icon]="faStar"></fa-icon> {{ menuItem.rating }}</span>
      <span><fa-icon [icon]="faClock"></fa-icon> {{ menuItem.time }}min</span>
    </div>
    <div class="menu-actions">
      <button class="story-btn" (click)="viewCulture.emit(menuItem)">文化解读</button>
      <button class="add-btn" (click)="onAddToCart()" [style.background]="isAdded ? '#4ecdc4' : ''">
        <fa-icon [icon]="isAdded ? faCheck : faPlus"></fa-icon>
      </button>
    </div>
  </div>
</div>