import { useReservations } from '../context/ReservationContext';
import { Link } from 'react-router-dom';

export default function Reservations() {
  const { reservations, cancelReservation } = useReservations();

  if (reservations.length === 0) {
    return (
      <main>
        <h1>Mes réservations</h1>
        <p>Aucune réservation pour le moment.</p>
        <Link to="/books">← Retour au catalogue</Link>
      </main>
    );
  }

  return (
    <main>
      <h1>Mes réservations</h1>
      <ul>
        {reservations.map(r => (
          <li key={r.reservationId}>
            <strong>{r.bookTitle}</strong> — {r.bookAuthor}
            <br />
            Téléphone : {r.phoneNumber}
            <br />
            Réservé le : {new Date(r.reservedAt).toLocaleDateString('fr-FR')}
            <br />
            Statut : {r.status}
            <br />
            <button onClick={() => cancelReservation(r.reservationId)}>Annuler</button>
          </li>
        ))}
      </ul>
    </main>
  );
}