import React from 'react';
import { format } from 'date-fns';
import './AppointmentConfirmation.css';

const AppointmentConfirmation = ({ appointment, onClose }) => {
    const startTime = new Date(appointment.start_time);

    return (
        <div className="confirmation-container">
            <div className="confirmation-icon">✓</div>
            <h2>Booking Confirmed!</h2>

            <div className="confirmation-details">
                <div className="detail-row">
                    <span className="detail-label">Date:</span>
                    <span className="detail-value">{format(startTime, 'MMMM d, yyyy')}</span>
                </div>
                <div className="detail-row">
                    <span className="detail-label">Time:</span>
                    <span className="detail-value">{format(startTime, 'h:mm a')}</span>
                </div>
                <div className="detail-row">
                    <span className="detail-label">Status:</span>
                    <span className="detail-value status-badge">{appointment.status}</span>
                </div>
            </div>

            <p className="confirmation-message">
                You will receive a confirmation email shortly with all the details.
            </p>

            <button onClick={onClose} className="btn-done">
                Done
            </button>
        </div>
    );
};

export default AppointmentConfirmation;
