import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ThemePaginationComponent } from '../../../components/theme-pagination.component';

type shopType = {
  image: string;
  name: string;
  oldprice?: string;
  price: string;
};

@Component({
  selector: 'app-shop-right',
  imports: [RouterLink, ThemePaginationComponent],
  template: `
    <div class="shop-sidebar-items-all">
      <div class="shop-sidebar-top">
        <div class="page-hadding">
          <p>Showing 1–12 of 24 results</p>
        </div>
        <div class="shop-top-filter">
          <select class="form-select wide">
            <option value="#">Default Sorting</option>
            <option value="#">option 1</option>
            <option value="#">option 2</option>
            <option value="#">option 3</option>
          </select>
        </div>
      </div>
      <div class="space10"></div>

      <div class="row">
        @for(item of shopData;track $index){
        <div class="col-lg-4 col-md-6">
          <div class="shop-single-box">
            <div class="shop-img _relative">
              <div class="shop-img-single img100">
                <img [src]="item.image" alt="" />
              </div>

              <div class="shop-box-hover-effect">
                <a routerLink="/cart" class="comon-button">Add to Cart</a>
              </div>
            </div>
            <div class="space24"></div>
            <div class="shop-hadding">
              <h4>
                <a routerLink="/cart">{{ item.name }}</a>
              </h4>
              <div class="shop-box-border"></div>
              <p>
                <s>{{ item.oldprice }}</s> {{ item.price }}
              </p>
            </div>
          </div>
        </div>
        }
      </div>

      <div class="space60"></div>
      <div class="row">
        <app-theme-pagination />
      </div>
    </div>
  `,
  styles: ``,
})
export class ShopRightComponent {
  shopData: shopType[] = [
    {
      image: 'assets/img/shop/shop-img1.png',
      name: 'Chair and pillow',
      oldprice: '$1200',
      price: '$1100',
    },
    {
      image: 'assets/img/shop/shop-img2.png',
      name: 'Armchair and pillow',
      price: '$1000',
    },
    {
      image: 'assets/img/shop/shop-img3.png',
      name: 'Stylish grey chair',
      price: '$2200',
    },
    {
      image: 'assets/img/shop/shop-img4.png',
      name: 'Old wooden armchair',
      price: '$1500',
    },
    {
      image: 'assets/img/shop/shop-img5.png',
      name: 'Armchair and pillow',
      oldprice: '$2200',
      price: '$2000',
    },
    {
      image: 'assets/img/shop/shop-img6.png',
      name: 'Stylish grey chair',
      price: '$2200',
    },
    {
      image: 'assets/img/shop/shop-img7.png',
      name: 'Red vintage armchair',
      oldprice: '$2100',
      price: '$1900',
    },
    {
      image: 'assets/img/shop/shop-img8.png',
      name: 'Armchair and pillow',
      price: '$1800',
    },
    {
      image: 'assets/img/shop/shop-img9.png',
      name: 'Comfort modern chair',
      price: '$2500',
    },
    {
      image: 'assets/img/shop/shop-img10.png',
      name: 'Old wooden armchair',
      price: '$1500',
    },
    {
      image: 'assets/img/shop/shop-img11.png',
      name: 'Armchair and pillow',
      price: '$1100',
    },
    {
      image: 'assets/img/shop/shop-img12.png',
      name: 'Stylish grey chair',
      price: '$2200',
    },
  ];
}
