<script lang="ts" setup>
import { IconSuccess } from '@computing/opendesign-icons';
const props = defineProps({
  multiSupported: {
    type: Boolean,
    default: false,
    required: true,
  },
});
</script>

<template>
  <div class="popper-content">
    <div class="item">
      <span class="circle bg1"></span>
      <span>{{ $t('IBMC_START01') }}</span>
    </div>
    <div class="item">
      <span class="circle bg2"></span>
      <span>{{ $t('IBMC_START02') }}</span>
    </div>
    <div class="item last-item">
      <el-icon>
        <IconSuccess />
      </el-icon>
      <span v-if="!multiSupported">{{ $t('IBMC_START03') }}</span>
      <span v-else>{{ $t('IBMC_START04') }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.popper-content {
  display: flex;
  flex-direction: column;
  font-size: 12px;

  .item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    .circle {
      margin-right: 8px;
      display: inline-block;
      width: 14px;
      height: 14px;
      min-width: 14px;
      border-radius: 50%;
      background-color: rgba(36, 171, 54, 1);
    }

    .bg2 {
      background-color: rgba(191, 199, 215, 1);
    }
  }

  .last-item {
    margin-bottom: 0;
    align-items: flex-start;

    .el-icon {
      font-size: 16px;
      margin-right: 8px;
    }
  }
}
</style>
