<template>
    <div class="bg-white p-4 rounded-lg shadow-lg hover:shadow-xl transition duration-200 ease-in-out">
      <div class="flex items-center space-x-4">
        <!-- Student Avatar -->
        <div class="w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center text-white font-semibold">
          {{ student.name.charAt(0).toUpperCase() }}
        </div>
  
        <!-- Student Info -->
        <div>
          <h3 class="text-xl font-semibold text-gray-800">{{ student.name }}</h3>
          <p class="text-sm text-gray-500">{{ student.email }}</p>
          <p class="text-sm text-gray-500">{{ student.phone }}</p>
          <p class="text-sm text-gray-400">{{ formatDate(student.dob) }}</p>
        </div>
      </div>
  
      <!-- Class Info -->
      <div class="mt-4 flex justify-between">
        <div class="text-sm font-medium text-gray-600">
          Class: {{ student.class.name }} - {{ student.class.section }}
        </div>
        <div
          :class="{
            'bg-green-100 text-green-700': student.attendanceStatus === 'present',
            'bg-red-100 text-red-700': student.attendanceStatus === 'absent',
          }"
          class="px-3 py-1 rounded-full text-xs font-medium"
        >
          {{ capitalize(student.attendanceStatus) }}
        </div>
      </div>
  
      <!-- View Details Button -->
      <div class="mt-4">
        <NuxtLink
          :to="`/students/${student.id}`"
          class="inline-block px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
        >
          View Details
        </NuxtLink>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue'
  
  // Props
  const props = defineProps({
    student: Object, // The student object passed down to the component
  })
  
  // Format Date (Helper function)
  const formatDate = (date) => {
    const options = { year: 'numeric', month: 'long', day: 'numeric' }
    return new Date(date).toLocaleDateString(undefined, options)
  }
  
  // Capitalize Attendance Status
  const capitalize = (text) => {
    return text.charAt(0).toUpperCase() + text.slice(1)
  }
  </script>
  
  <style scoped>
  /* Style the StudentCard for better UI */
  h3 {
    font-weight: bold;
  }
  
  div.flex {
    display: flex;
    justify-content: flex-start;
  }
  </style>
  