<script lang="ts" setup>
import {Cloud, Code, Database, Server} from 'lucide-vue-next'
import {SkillGroup} from "@/domain/models/Skill";

defineProps<{
  skillGroups: SkillGroup[]
}>()

function getCategoryIcon(category) {
  const icons = {
    frontend: Code,
    backend: Server,
    database: Database,
    devops: Cloud
  }
  return icons[category] || Code
}
</script>

<template>
  <section id="skills" 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">
          Habilidades Técnicas
        </h2>

        <div class="grid md:grid-cols-2 gap-8">
          <div
              v-for="skillGroup in skillGroups"
              :key="skillGroup.name"
            class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg"
          >
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6 capitalize flex items-center">
              <component :is="skillGroup.icon" class="w-6 h-6 mr-2 text-purple-600"/>
              {{ skillGroup.name }}
            </h3>

            <div class="space-y-4">
              <div
                  v-for="skill in skillGroup.skills"
                :key="skill.name"
                class="space-y-2"
              >
                <div class="flex justify-between items-center">
                  <span class="font-medium text-gray-900 dark:text-white">{{ skill.name }}</span>
                  <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
                    <span>{{ skill.years }} años</span>
                    <span>{{ skill.level }}%</span>
                  </div>
                </div>
                
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                  <div
                    class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full transition-all duration-1000"
                    :style="{ width: `${skill.level}%` }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

