<script setup lang="ts">
import { ref } from 'vue';

import Lianxin from '@/assets/image/lianxin.png';
import Shijie from '@/assets/image/shijie.png';
import Tengxun from '@/assets/image/shiping.png';

interface Product {
  id: number;
  name: string;
  image: string;
}

const products = ref<Product[]>([
  {
    id: 1,
    name: '腾讯视频',
    image: Tengxun,
  },
  {
    id: 2,
    name: '连信App',
    image: Lianxin,
  },
  {
    id: 3,
    name: '便携世界',
    image: Shijie,
  },
]);
</script>

<template>
  <div>
    <h2 class="ml-[21px] mt-[21px] text-[18px] font-bold">Product List</h2>
    <div class="flex flex-wrap gap-[18px]">
      <div
        v-for="product in products"
        :key="product.id"
        class="mt-[24px] flex items-center rounded-[30px] border border-gray-200 bg-white px-[20px] py-[7px] shadow-md"
      >
        <img :alt="product.name" :src="product.image" class="h-[30px]" />
        <div class="ml-[10px] text-[11px] font-bold">{{ product.name }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
