<script lang="ts" setup>
  import {computed} from 'vue'
  import {Github, Globe, Linkedin} from 'lucide-vue-next'
  import config from "@/config";
  import type {Profile} from '@/domain/models/Profile'

  defineProps<{
    profile: Profile
  }>()

  const currentYear = computed(() => new Date().getFullYear())

  function getSocialIcon(platform) {
    const icons = {
      github: Github,
      linkedin: Linkedin,
      portfolio: Globe
    }
    return icons[platform] || Globe
  }
</script>

<template>
  <footer class="bg-gray-900 text-white py-12">
    <div class="container mx-auto px-4">
      <div class="grid md:grid-cols-3 gap-8">
        <!-- About -->
        <div>
          <h3 class="text-xl font-bold mb-4">{{ profile?.name }}</h3>
          <p class="text-gray-300 mb-4">
            {{ profile?.title }}
          </p>
          <div class="flex space-x-4">
            <a
                v-for="social in profile?.social"
                :key="social.platform"
                :href="social.url"
              target="_blank"
              class="text-gray-400 hover:text-white transition-colors"
            >
              <component :is="getSocialIcon(social.platform)" class="w-5 h-5"/>
            </a>
          </div>
        </div>

        <!-- Quick Links -->
        <div>
          <h3 class="text-xl font-bold mb-4">Enlaces Rápidos</h3>
          <ul class="space-y-2">
            <li v-if="config.sections.aboutEnabled">
              <a class="text-gray-300 hover:text-white transition-colors" href="#about">Sobre mí</a>
            </li>
            <li v-if="config.sections.experienceEnabled">
              <a class="text-gray-300 hover:text-white transition-colors" href="#experience">Experiencia</a>
            </li>
            <li v-if="config.sections.projectsEnabled">
              <a class="text-gray-300 hover:text-white transition-colors" href="#projects">Proyectos</a>
            </li>
            <li v-if="config.sections.skillsEnabled">
              <a class="text-gray-300 hover:text-white transition-colors" href="#skills">Habilidades</a>
            </li>
            <li v-if="config.sections.contactEnabled">
              <a class="text-gray-300 hover:text-white transition-colors" href="#contact">Contacto</a>
            </li>
          </ul>
        </div>

        <!-- Contact Info -->
        <div>
          <h3 class="text-xl font-bold mb-4">Contacto</h3>
          <div class="space-y-2 text-gray-300">
            <p>{{ profile?.email }}</p>
            <p style="display:none">{{ profile?.phone }}</p>
            <p>{{ profile?.location }}</p>
          </div>
        </div>
      </div>

      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; {{ currentYear }} {{ profile?.name }}. Todos los derechos reservados.</p>
        <p class="mt-2 text-sm">Hecho con ❤️ y Vue.js</p>
      </div>
    </div>
  </footer>
</template>

