Card

@Component({
  template: `
    <div class="card-grid">
      <flx-card
        *ngFor="let item of items"
        [title]="item.title"
        [subtitle]="item.category"
        [clickable]="true"
        (cardClick)="onCardClick(item)">
        <p>{{ item.description }}</p>
      </flx-card>
    </div>
  `
})
export class ProductGridComponent {
  items = [
    {
      id: 1,
      title: 'Product A',
      category: 'Electronics',
      description: 'High-quality electronic device'
    },
    {
      id: 2,
      title: 'Product B',
      category: 'Accessories',
      description: 'Premium accessories'
    }
  ];
  
  onCardClick(item: any) {
    console.log('Navigating to:', item.id);
    // Navigate to detail page
  }
}

@Component({
  template: `
    <flx-card [variant]="'elevated'" [elevation]="3">
      <img
        slot="media"
        [src]="product.imageUrl"
        [alt]="product.name"
        class="card-image" />
      <div slot="content">
        <h3>{{ product.name }}</h3>
        <p class="price">{{ product.price | currency }}</p>
        <p>{{ product.description }}</p>
      </div>
      <div slot="footer">
        <button (click)="addToCart(product)">Add to Cart</button>
        <button (click)="viewDetails(product)">View Details</button>
      </div>
    </flx-card>
  `,
  styles: [`
    .card-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .price {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--primary-color);
    }
  `]
})
export class ProductCardComponent {
  product = {
    name: 'Premium Widget',
    price: 99.99,
    description: 'A high-quality widget for all your needs',
    imageUrl: '/assets/product.jpg'
  };
  
  addToCart(product: any) {
    console.log('Added to cart:', product);
  }
  
  viewDetails(product: any) {
    console.log('View details:', product);
  }
}

@Component({
  template: `
    <flx-card
      [title]="data ? data.title : 'Loading...'"
      [loading]="isLoading">
      <div *ngIf="data">
        <p>{{ data.content }}</p>
      </div>
    </flx-card>
  `
})
export class DataCardComponent implements OnInit {
  isLoading = true;
  data: any = null;
  
  ngOnInit() {
    this.loadData();
  }
  
  async loadData() {
    this.isLoading = true;
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));
      this.data = {
        title: 'Data Loaded',
        content: 'Content from API'
      };
    } finally {
      this.isLoading = false;
    }
  }
}

@Component({
  template: `
    <div class="card-grid">
      <flx-card
        *ngFor="let stat of statistics"
        [variant]="'elevated'"
        [padding]="'large'">
        <div class="stat-card">
          <div class="stat-icon">
            <flx-icon [name]="stat.icon"></flx-icon>
          </div>
          <h3>{{ stat.value }}</h3>
          <p>{{ stat.label }}</p>
          <span class="trend" [class.positive]="stat.trend > 0">
            {{ stat.trend > 0 ? '↑' : '↓' }} {{ stat.trend }}%
          </span>
        </div>
      </flx-card>
    </div>
  `,
  styles: [`
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
    }
    .stat-card {
      text-align: center;
    }
    .stat-icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    .trend {
      color: var(--error-color);
    }
    .trend.positive {
      color: var(--success-color);
    }
  `]
})
export class DashboardComponent {
  statistics = [
    { icon: 'users', value: '1,234', label: 'Total Users', trend: 12 },
    { icon: 'revenue', value: '$45,678', label: 'Revenue', trend: 8 },
    { icon: 'orders', value: '567', label: 'Orders', trend: -3 },
    { icon: 'growth', value: '23%', label: 'Growth', trend: 15 }
  ];
}