<template>
    <div id="agenda">
        <h3>Rendez-vous</h3>
        <table>
            <thead>
                <tr>
                    <th>Projet</th>
                    <th>Date</th>
                    <th>Lieu</th>
                </tr>
            </thead>
            <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;
}

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

<style scoped>
h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
}

#agenda {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    text-align: left;
    margin-top: 20px;
    border: 1px solid #ccc;
}

th {
    background-color: #f0f2f5;
    padding: 12px;
    font-weight: 600;
    color: #333;
}

/* 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>
