import React from 'react';
import { AlertTriangle, RefreshCw, Inbox } from 'lucide-react';

interface CardSectionStatusProps {
    isLoading?: boolean;
    isEmpty?: boolean;
    error?: string | null;
    emptyIcon?: React.ReactNode;
    emptyMessage?: string;
    emptyAction?: { label: string; onClick: () => void };
    onRetry?: () => void;
    children: React.ReactNode;
}

const CardSectionStatus: React.FC<CardSectionStatusProps> = ({
    isLoading = false,
    isEmpty = false,
    error = null,
    emptyIcon,
    emptyMessage = 'No hay registros disponibles.',
    emptyAction,
    onRetry,
    children,
}) => {
    if (isLoading) {
        return (
            <div className="p-3 text-center" aria-busy="true" aria-live="polite">
                <div className="spinner-border spinner-border-sm text-primary mb-2" role="status"></div>
                <div style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Cargando información...</div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="d-flex flex-column align-items-center justify-content-center text-center p-3 m-2 rounded" style={{ backgroundColor: '#fff1f2', border: '1px solid #fecdd3' }} role="alert">
                <div style={{ width: '36px', height: '36px', borderRadius: '50%', background: '#ffe4e6', color: '#e11d48', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '0.5rem' }}>
                    <AlertTriangle size={18} />
                </div>
                <p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#9f1239', marginBottom: '0.5rem' }}>{error}</p>
                {onRetry && (
                    <button 
                        type="button"
                        className="saas-btn-outline"
                        style={{ color: '#e11d48', borderColor: '#fecdd3' }}
                        onClick={onRetry}
                    >
                        <RefreshCw size={12} /> Reintentar
                    </button>
                )}
            </div>
        );
    }

    if (isEmpty) {
        return (
            <div className="saas-empty-state">
                <div className="saas-empty-icon">
                    {emptyIcon || <Inbox size={22} />}
                </div>
                <p style={{ fontSize: '0.8rem', fontWeight: 500, color: '#64748b', marginBottom: '0.75rem', maxWidth: '240px' }}>
                    {emptyMessage}
                </p>
                {emptyAction && (
                    <button 
                        type="button" 
                        className="saas-btn-outline" 
                        onClick={emptyAction.onClick}
                    >
                        {emptyAction.label}
                    </button>
                )}
            </div>
        );
    }

    return <>{children}</>;
};

export default CardSectionStatus;