import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';
import { Product } from '../../../classes/product';
import { resolveAsset } from '../../../classes/helpers';

@Component({
    tag: 'progress-products',
    styleUrl: 'progress-products.css',
    scoped: true,
})
export class ProgressProducts {
    @Prop() products!: Product[];
    @Event() progressStepChanged: EventEmitter<string>;

    render() {
        return (
            <div class="bg">
                <div class="container mb-2">
                    <a class="back-link" href="#" onClick={() => this.progressStepChanged.emit('box')}>
                        &lt; Back
                    </a>
                    <div class="row gy-3">
                        {this.products.map(p => (
                            <div class="col-md-6 col-lg-4 col-xl-3 d-flex">
                                <product-card product={p}></product-card>
                            </div>
                        ))}
                    </div>
                </div>
                <div class="img-wrapper">
                    <img class="img" src={resolveAsset('/assets/product-bg.jpg')} alt="" />
                </div>
            </div>
        );
    }
}