'use client';

import React, { ReactNode, CSSProperties } from 'react';
import { Loader2 } from 'lucide-react';
import styles from './ContentCard.module.scss';

interface ContentCardProps {
    title?: ReactNode;
    icon?: ReactNode;
    headerActions?: ReactNode;
    /** Alias de `headerActions` (compat Ant Design Card). */
    extra?: ReactNode;
    children: ReactNode;
    className?: string;
    bodyClassName?: string;
    flexColumn?: boolean;
    flexColumnFull?: boolean;
    style?: CSSProperties;
    loading?: boolean;
}

export default function ContentCard({
    title,
    icon,
    headerActions,
    extra,
    children,
    className = '',
    bodyClassName = '',
    flexColumn = false,
    flexColumnFull = false,
    style,
    loading = false,
}: ContentCardProps) {
    const actions = headerActions ?? extra;
    const cardClasses = [styles.contentCard, flexColumnFull && styles.flexColumnFull, className]
        .filter(Boolean)
        .join(' ');

    const bodyClasses = [
        styles.contentCardBody,
        flexColumn && styles.flexColumn,
        flexColumnFull && styles.flexColumnMin,
        bodyClassName,
    ]
        .filter(Boolean)
        .join(' ');

    return (
        <div className={cardClasses} style={style}>
            {(title || actions) && (
                <div className={styles.contentCardHeader}>
                    {title && (
                        <h3>
                            {icon && <span className={styles.contentCardIcon}>{icon}</span>}
                            {title}
                        </h3>
                    )}
                    {actions && <div>{actions}</div>}
                </div>
            )}
            <div className={bodyClasses} style={{ position: 'relative' }}>
                {loading && (
                    <div
                        style={{
                            position: 'absolute',
                            inset: 0,
                            background: 'rgba(255,255,255,0.7)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            zIndex: 1,
                        }}
                    >
                        <Loader2
                            size={24}
                            className="animate-spin"
                            style={{ color: '#1c84c6' }}
                            aria-hidden
                        />
                    </div>
                )}
                {children}
            </div>
        </div>
    );
}