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

defineProps<{
  education: Education[]
}>()
</script>

<template>
  <section id="education" 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">
          Educación
        </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="(edu, index) in education"
                :key="edu.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">
                <GraduationCap 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">
                      {{ edu.degree }}
                    </h3>
                    <h4 class="text-lg text-purple-600 dark:text-purple-400 font-semibold">
                      {{ edu.institution }}
                    </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>{{ edu.period }}</span>
                    </div>
                  </div>
                </div>

                <p class="text-gray-600 dark:text-gray-300 mb-4">
                  {{ edu.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"
                  >
                    {{ edu.grade }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

