// Reusable empty state component. Library of presets + generic API.

function EmptyState({ icon, title, sub, primary, secondary }) {
  const Ic = (typeof icon === "string" ? (Icons && Icons[icon]) : icon) || Icons.Inbox;
  return (
    <div className="es">
      <div className="es-illu"><Ic size={28}/></div>
      <div className="es-title">{title}</div>
      {sub && <div className="es-sub">{sub}</div>}
      {(primary || secondary) && (
        <div className="es-actions">
          {secondary && <button className="es-btn is-ghost" onClick={secondary.onClick}>{secondary.label}</button>}
          {primary && <button className="es-btn" onClick={primary.onClick}>{primary.label}</button>}
        </div>
      )}
    </div>
  );
}

// Named presets for common states (kept consistent across views)
const EmptyPresets = {
  noResults: (onClear) => ({
    icon: "Search", title: "No results",
    sub: "Try a different keyword or clear your filters.",
    primary: onClear ? { label: "Clear filters", onClick: onClear } : null,
  }),
  allCaught: {
    icon: "Check", title: "You're all caught up",
    sub: "Nothing needs your attention right now.",
  },
  noTasks: (onAdd) => ({
    icon: "Plus", title: "No tasks yet",
    sub: "Add your first task to start tracking work.",
    primary: onAdd ? { label: "Add task", onClick: onAdd } : null,
  }),
  noTickets: {
    icon: "Inbox", title: "Inbox is empty",
    sub: "New tickets from email, Slack, and your portal will show up here.",
  },
};

Object.assign(window, { EmptyState, EmptyPresets });