import React from 'react';
import './LeaveCounters.css';

export default function LeaveCounters({ availableCP, rttInProcess, absenteism, isLoading, error }) {
    if (isLoading) {
        return (
            <div className="leave-counters-section">
                <h2 className="section-title">Mes Compteurs absences et congés</h2>
                <div className="counters-grid">
                    <p>Chargement des compteurs...</p>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="leave-counters-section">
                <h2 className="section-title">Mes Compteurs absences et congés</h2>
                <div className="counters-grid">
                    <p className="error-message">Erreur : {error}</p>
                </div>
            </div>
        );
    }

    return (
        <div className="leave-counters-section">
            <h2 className="section-title">Mes Compteurs absences et congés</h2>
            <div className="counters-grid">
                <div className="counter-item">
                    <span className="counter-value">{availableCP}</span>
                    <span className="counter-label">CP</span>
                </div>
                <div className="counter-item period-in-progress">
                    <span className="period-label">Période en cours</span>
                    <span className="counter-value">{rttInProcess}</span>
                    <span className="counter-label">RTT</span>
                </div>
                <div className="counter-item">
                    <span className="counter-value">{absenteism}</span>
                    <span className="counter-label">ABS</span>
                </div>
            </div>
        </div>
    );
}
