<script lang="ts" setup>
import {ExternalLink, Github} from 'lucide-vue-next'
import type {Project} from '@/domain/models/Project'

defineProps<{
  projects: Project[]
}>()
</script>

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

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="project in projects"
            :key="project.id"
            class="bg-gray-50 dark:bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:scale-105"
          >
            <!-- Project Image -->
            <div class="relative h-48 overflow-hidden">
              <img
                :src="project.image"
                :alt="project.title"
                class="w-full h-full object-cover"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            </div>

            <!-- Project Content -->
            <div class="p-6">
              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                {{ project.title }}
              </h3>
              
              <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                {{ project.description }}
              </p>

              <!-- Technologies -->
              <div class="flex flex-wrap gap-2 mb-4">
                <span
                  v-for="tech in project.technologies.slice(0, 3)"
                  :key="tech"
                  class="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded text-xs"
                >
                  {{ tech }}
                </span>
                <span
                  v-if="project.technologies.length > 3"
                  class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded text-xs"
                >
                  +{{ project.technologies.length - 3 }}
                </span>
              </div>

              <!-- Metrics -->
              <div class="grid grid-cols-2 gap-4 mb-4 text-sm">
                <div
                  v-for="(value, key) in project.metrics"
                  :key="key"
                  class="text-center p-2 bg-white dark:bg-gray-600 rounded"
                >
                  <div class="font-bold text-purple-600 dark:text-purple-400">{{ value }}</div>
                  <div class="text-gray-500 dark:text-gray-400 capitalize">{{ key }}</div>
                </div>
              </div>

              <!-- Links -->
              <div class="flex space-x-2">
                <a
                    v-if="project.demo"
                    :href="project.demo"
                  target="_blank"
                  class="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-center text-sm font-medium transition-colors"
                >
                  <ExternalLink class="w-4 h-4 inline mr-1" />
                  Demo
                </a>
                <a
                    v-if="project.repository"
                    :href="project.repository"
                  target="_blank"
                  class="flex-1 px-4 py-2 border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white rounded-lg text-center text-sm font-medium transition-colors"
                >
                  <Github class="w-4 h-4 inline mr-1" />
                  Código
                </a>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>
</template>

