<template>
    <div id="agenda">
        <h3>Rendez-vous</h3>
        <table>
        <tbody>
            <tr v-for=" (p, index) in projectRDV" :key="index" >
                <td>{{ p.projectName }} </td> <td>{{ p.date }}</td> <td>{{ p.lieu }}</td>
            </tr>
        </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
    import { defineProps } from "vue";

    interface rendezVous{
        projectName: string,
        date: string,
        lieu: string,
    }

    const props = defineProps<{
        projectRDV: rendezVous[]
    }>();
</script>

<style scoped>
 #agenda {   
    padding: 20px;
  }

  /* Table Styling */
 table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    text-align: left;
    margin-top: 20px;
    border: 1px solid #ccc;
  }
  
  /* Header Row (if exists) */
  th {
    background-color: #f4f4f4;
    padding: 12px;
    font-weight: bold;
    border: 1px solid #ccc;
  }
  
  /* Table Body Rows */
  tbody tr {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s ease; /* Smooth hover effect */
  }
  
  tbody tr:hover {
    background-color: #f9f9f9; /* Highlight row on hover */
  }
  
  /* Cells Styling */
  td {
    padding: 10px;
    border: 1px solid #eee;
    font-size: 14px;
    vertical-align: middle; /* Align text to middle */
  }
  
  /* First Column Styling */
  td:first-child {
    text-align: center;
    width: 50px; /* Adjust width as needed */
  }
 
</style>