<template>
    <div class="bg-white p-4 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold text-gray-800 mb-4">Attendance List</h2>
  
      <table class="min-w-full table-auto border-collapse">
        <thead>
          <tr>
            <th class="px-4 py-2 text-left border-b">Student Name</th>
            <th class="px-4 py-2 text-left border-b">Attendance Status</th>
            <th class="px-4 py-2 text-left border-b">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="student in students" :key="student.id">
            <td class="px-4 py-2 border-b">{{ student.name }}</td>
            <td class="px-4 py-2 border-b">
              <span
                :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) }}
              </span>
            </td>
            <td class="px-4 py-2 border-b">
              <button
                @click="toggleAttendance(student)"
                class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
              >
                Toggle Status
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue'
  
  // Props
  const props = defineProps({
    students: Array, // Array of student objects passed down to the component
  })
  
  // Toggle Attendance Status (Helper function)
  const toggleAttendance = (student) => {
    student.attendanceStatus = student.attendanceStatus === 'present' ? 'absent' : 'present'
  }
  
  // Capitalize Attendance Status
  const capitalize = (text) => {
    return text.charAt(0).toUpperCase() + text.slice(1)
  }
  </script>
  
  <style scoped>
  table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
  }
  
  th,
  td {
    padding: 12px 16px;
  }
  
  th {
    background-color: #f7fafc;
    color: #2d3748;
    text-align: left;
  }
  
  tr:hover {
    background-color: #f1f1f1;
  }
  </style>
  