<template>
  <AppLayout :user="user">
    <div class="w-full max-w-sm bg-white shadow-xl overflow-hidden flex flex-col relative profile-card mt-0">
      
      <div class="p-6">
        <h2 class="text-2xl font-bold profile-name-gradient" style="font-family: var(--font-heading);">Education</h2>
        <div class="mt-6 space-y-4">
          <div v-for="(edu, index) in education" :key="edu.id" class="bg-white rounded-lg p-4 border border-gray-200 shadow-sm reveal-init" :style="{ transitionDelay: `${index * 100}ms` }">
            <div class="flex justify-between items-start mb-2">
              <h3 class="text-lg font-semibold text-gray-800">{{ edu.degree }}</h3>
              <span class="text-sm text-gray-500">{{ edu.from_year }} - {{ edu.to_year }}</span>
            </div>
            <p class="text-md font-medium text-gray-700 mb-1">{{ edu.institute }}</p>
            <p class="text-sm text-gray-600 mb-2">{{ edu.location }}</p>
            <p class="text-sm text-gray-500" v-if="edu.description">{{ edu.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { onMounted } from 'vue';
import AppLayout from '../Layouts/AppLayout.vue';

const props = defineProps({
  user: Object,
  education: Array,
  theme: Object,
});

onMounted(() => {
  // Set theme colors dynamically
  if (props.theme) {
    const root = document.documentElement;
    root.style.setProperty('--primary-1', props.theme.primary_color_1 || '#9912fa');
    root.style.setProperty('--primary-2', props.theme.primary_color_2 || '#1c3f86');
    root.style.setProperty('--accent-1', props.theme.accent_color_1 || '#9912fa');
    root.style.setProperty('--accent-2', props.theme.accent_color_2 || '#1c3f86');
    root.style.setProperty('--bg-start', props.theme.bg_start || '#1c3f86');
    root.style.setProperty('--bg-end', props.theme.bg_end || '#1c3f86');
  }

  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  const eduList = document.getElementById('educationList');
  if (eduList) {
    const items = Array.from(eduList.querySelectorAll('li'));
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('reveal');
            entry.target.classList.remove('reveal-init');
            observer.unobserve(entry.target);
          }
        });
      },
      { root: null, threshold: 0.12 }
    );

    items.forEach((li) => observer.observe(li));
  }
});
</script>