<script lang="ts" setup>
import {type Certification} from '@/domain/models/Certification.ts'
import {Award, Calendar} from 'lucide-vue-next'

defineProps<{
  certification: Certification[]
}>()
</script>

<template>
  <section id="certification" class="py-20 bg-gray-50 dark:bg-gray-900">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
          Certificaciones
        </h2>

        <div class="relative">
          <!-- Timeline Line -->
          <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-purple-200 dark:bg-purple-800"></div>

          <!-- Experience Items -->
          <div class="space-y-12">
            <div
                v-for="(cert, index) in certification"
                :key="cert.id"
                class="relative flex items-start space-x-6"
            >
              <!-- Timeline Dot -->
              <div
                  class="flex-shrink-0 w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center relative z-10">
                <Award class="w-8 h-8 text-white"/>
              </div>

              <!-- Content -->
              <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                  <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">
                      {{ cert.name }}
                    </h3>
                    <h4 class="text-lg text-purple-600 dark:text-purple-400 font-semibold">
                      {{ cert.issuer }}
                    </h4>
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400 mt-2 md:mt-0">
                    <div class="flex items-center space-x-2">
                      <Calendar class="w-4 h-4"/>
                      <span>{{ cert.date }}</span>
                    </div>
                  </div>
                </div>

                <p class="text-gray-600 dark:text-gray-300 mb-4">
                  {{ cert.description }}
                </p>

                <!-- Technologies -->
                <div class="flex flex-wrap gap-2 mb-4">
                  <span
                      class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-sm"
                  >
                    {{ cert.credentialId }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

