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

const PRESET = {
  empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },
  permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },
  search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },
  error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }
};

export default function EmptyPro({ type = 'empty', icon, title, desc, actionText, secondaryText, onAction, onSecondary }) {
  const p = PRESET[type] || {};
  const resolved = {
    icon: icon || p.icon || '📭',
    title: title || p.title || '暂无数据',
    desc: desc || p.desc || ''
  };
  return (
    <div className="kole-empty">
      <div className="kole-empty-icon">{resolved.icon}</div>
      <div className="kole-empty-title">{resolved.title}</div>
      {resolved.desc ? <div className="kole-empty-desc">{resolved.desc}</div> : null}
      {(actionText || secondaryText) ? (
        <div className="kole-empty-actions">
          {actionText ? <button className="kole-empty-btn primary" onClick={onAction}>{actionText}</button> : null}
          {secondaryText ? <button className="kole-empty-btn" onClick={onSecondary}>{secondaryText}</button> : null}
        </div>
      ) : null}
    </div>
  );
}
