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

defineProps<{
  experience: Experience[]
}>()
</script>

<template>
  <section id="experience" 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">
          Experiencia Profesional
        </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="(exp, index) in experience"
              :key="exp.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">
                <Briefcase 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">
                      {{ exp.position }}
                    </h3>
                    <h4 class="text-lg text-purple-600 dark:text-purple-400 font-semibold">
                      {{ exp.company }}
                    </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>{{ exp.period }}</span>
                    </div>
                    <div class="flex items-center space-x-2 mt-1">
                      <MapPin class="w-4 h-4" />
                      <span>{{ exp.location }}</span>
                    </div>
                  </div>
                </div>

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

                <!-- Technologies -->
                <div class="flex flex-wrap gap-2 mb-4">
                  <span
                    v-for="tech in exp.technologies"
                    :key="tech"
                    class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-sm"
                  >
                    {{ tech }}
                  </span>
                </div>

                <!-- Achievements -->
                <div class="space-y-2">
                  <h5 class="font-semibold text-gray-900 dark:text-white">Logros destacados:</h5>
                  <ul class="space-y-1">
                    <li
                      v-for="achievement in exp.achievements"
                      :key="achievement"
                      class="flex items-start space-x-2 text-gray-600 dark:text-gray-300"
                    >
                      <CheckCircle class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>{{ achievement }}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

