interface EmptyStateProps {
  icon?: string;
  title: string;
  description?: string;
  action?: string;
  onAction?: () => void;
}

export function EmptyState({ icon = "📋", title, description, action, onAction }: EmptyStateProps) {
  return (
    <div class="text-center py-16 rounded-[var(--z-radius-card)] border border-dashed" style={{ borderColor: "var(--z-border)" }}>
      <div class="text-3xl mb-3 opacity-30">{icon}</div>
      <p class="text-sm font-medium" style={{ color: "var(--z-muted)" }}>{title}</p>
      {description && (
        <p class="text-xs mt-1 max-w-[200px] mx-auto" style={{ color: "var(--z-muted)", opacity: 0.5 }}>
          {description}
        </p>
      )}
      {action && onAction && (
        <button
          onClick={onAction}
          class="mt-4 px-4 py-2 text-xs rounded-[var(--z-radius-button)] font-medium text-white"
          style={{ background: "var(--z-accent)" }}
        >
          {action}
        </button>
      )}
    </div>
  );
}
