<template>
  <Card>
    <div
      class="wg-shop-manager"
      @click="openExternalUrl(openUrl)"
    >
      <div class="wg-shop-manager__logo">
        <img
          :src="logoUrl"
          class="wg-shop-manager__image"
        >
      </div>

      <div class="wg-shop-manager__body">
        <h4 class="wg-shop-manager__title">
          {{ title }}
        </h4>
        <div class="wg-shop-manager__subtitle">
          {{ subtitle }}
        </div>
      </div>
    </div>
  </Card>
</template>

<script>

export default {
  name: 'ShopManagerWidget',
  data() {
    return {
      logoUrl: 'https://cms.autoshopee.com/uploads/shop_manager_logo_0928c6e4ff.png',
      title: 'Shop Manager (Shopee Lazada Tiktok) | chỉ 250k/tháng tặng kèm AutoShopee Kit',
      subtitle: 'Phần mềm quản lý đơn hàng và tin nhắn nhiều shop cùng một lúc cài đặt trên máy tính',
      openUrl: 'https://manager.autoshopee.com',
    };
  },
};
</script>

<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.wg-shop-manager {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  cursor: pointer;
  border-radius: $radius-item;
  transition: background $motion-fast;

  &:hover {
    background: $c-surface-soft;
  }

  &__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: $c-surface-alt;
    border-radius: $radius-item;
  }

  &__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  &__body {
    flex: 1;
    min-width: 0;
  }

  &__title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: $c-text-strong;

    @include line-clamp(2);
  }

  &__subtitle {
    font-size: 12px;
    line-height: 1.5;
    color: $c-text-muted;

    @include line-clamp(2);
  }
}
</style>
