<template>
  <div class="flex flex-col justify-center items-center gap-1 mb-3">
    <CRMLogo class="size-10 shrink-0 rounded mb-4" />
    <div class="text-base font-medium">
      {{ __('Welcome to Frappe CRM') }}
    </div>
    <div class="text-p-base font-normal">
      {{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
    </div>
  </div>
  <div class="flex flex-col gap-2.5 overflow-hidden">
    <div class="flex justify-between items-center py-0.5">
      <div class="text-base font-medium">{{ __('Getting started') }}</div>
      <Badge
        :label="__('{0}% completed', [completedPercentage])"
        theme="orange"
        size="lg"
      />
    </div>
    <div class="flex flex-col gap-1.5 overflow-y-auto">
      <div
        v-for="step in steps"
        :key="step.title"
        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
        :class="[
          step.completed ? 'text-ink-gray-5 line-through' : 'text-ink-gray-8',
        ]"
        @click="() => !step.completed && step.onClick()"
      >
        <component :is="step.icon" class="h-4" />
        <div class="text-base">{{ step.title }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import CRMLogo from '@/components/Icons/CRMLogo.vue'
import { useOnboarding } from '@/composables/onboarding'

const emit = defineEmits(['close'])

const { steps, stepsCompleted, totalSteps, completedPercentage } =
  useOnboarding()
</script>
