import React, { ReactNode } from 'react';
import styles from './EmptyState.module.scss';

export interface EmptyStateProps {
    icon?: ReactNode;
    title?: string;
    description?: string | ReactNode;
    action?: ReactNode;
    className?: string;
}

export function EmptyState({
    icon,
    title = 'Nenhum registro encontrado',
    description,
    action,
    className = '',
}: EmptyStateProps) {
    return (
        <div className={`${styles.emptyState} ${className}`}>
            <div className={styles.emptyStateContent}>
                {icon && <div className={styles.emptyIcon}>{icon}</div>}
                {title && <h3 className={styles.emptyTitle}>{title}</h3>}
                {description && <p className={styles.emptyDescription}>{description}</p>}
                {action && <div className={styles.emptyAction}>{action}</div>}
            </div>
        </div>
    );
}