import { Icon } from './icons';

export default function EmptyState({
  icon = 'info',
  title = '暂无数据',
  description = '这里还没有内容',
  action,
  actionLabel,
  onAction,
}) {
  return (
    <div className="empty-state-enhanced">
      <div className="empty-state-illustration">
        <div className="empty-state-bg">
          <Icon name={icon} size={32} />
        </div>
      </div>
      <h3 className="empty-state-title">{title}</h3>
      {description && <p className="empty-state-description">{description}</p>}
      {action && (
        <button type="button" className="btn btn-primary empty-state-action" onClick={onAction}>
          {actionLabel}
        </button>
      )}
    </div>
  );
}