'use client';

import {EmptyState} from '@astryxdesign/core/EmptyState';
import {Icon} from '@astryxdesign/core/Icon';
import {ICONS} from '@/shared/utils/icons';
import type {IconKey} from '@/shared/utils/icons';

/**
 * Astryx's EmptyState with our icon convention applied.
 *
 * The icon is named, NOT passed as a component. Two reasons:
 *
 *  1. RSC safety. A lucide icon is a function/forwardRef, and React refuses to
 *     serialise functions across the server/client boundary — passing
 *     `icon={ICONS.revenue}` from a Server Component throws
 *     "Functions cannot be passed directly to Client Components". A string key
 *     crosses fine, so this component works from either side.
 *  2. It enforces the central map. There is no way to pass an ad-hoc icon,
 *     which is how an icon set drifts.
 *
 * `description` is deliberately required. An empty state that only says
 * "No data" tells a merchant nothing about whether something is broken,
 * filtered out, or genuinely hasn't happened yet — which is the entire reason
 * to render one instead of a blank box.
 */
export function EmptyPanel({
  icon,
  title,
  description,
  actions,
  isCompact = true,
}: {
  icon: IconKey;
  title: string;
  description: string;
  actions?: React.ReactNode;
  isCompact?: boolean;
}) {
  return (
    <EmptyState
      icon={<Icon icon={ICONS[icon]} size="lg" color="secondary" />}
      title={title}
      description={description}
      actions={actions}
      isCompact={isCompact}
    />
  );
}
